mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.1 KiB
54 lines
1.1 KiB
2 months ago
|
<script setup lang="ts">
|
||
|
|
import Plyr from 'plyr'
|
||
|
|
import 'plyr/dist/plyr.css'
|
||
|
|
|
||
|
|
defineProps<{
|
||
|
|
body: string
|
||
|
|
name: string
|
||
|
|
published_at: string
|
||
|
|
embed_url: string
|
||
|
|
html_url: string
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const videoPlayer = ref<HTMLElement>()
|
||
|
|
|
||
|
|
const player = ref()
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
if (!videoPlayer.value) return
|
||
|
|
player.value = new Plyr(videoPlayer.value, {
|
||
|
|
previewThumbnails: {},
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
if (player.value) {
|
||
|
|
player.value.destroy()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="flex flex-col gap-5">
|
||
|
|
<div class="aspect-video !rounded-lg mx-auto !h-[428px]">
|
||
|
|
<div id="player" ref="videoPlayer" class="plyr__video-embed">
|
||
|
|
<iframe
|
||
|
|
:src="`${embed_url}?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1`"
|
||
|
|
allowfullscreen
|
||
|
|
allowtransparency
|
||
|
|
allow="autoplay"
|
||
|
|
></iframe>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
{{ name }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.plyr--video {
|
||
|
|
@apply !rounded-lg;
|
||
|
|
}
|
||
|
|
</style>
|