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.
57 lines
1.0 KiB
57 lines
1.0 KiB
<script setup lang="ts"> |
|
import Plyr from 'plyr' |
|
import 'plyr/dist/plyr.css' |
|
|
|
interface Props { |
|
src?: string[] |
|
mimeType?: string |
|
class?: string |
|
title?: string |
|
} |
|
|
|
const props = withDefaults(defineProps<Props>(), { |
|
class: '', |
|
}) |
|
|
|
const emit = defineEmits<Emits>() |
|
|
|
interface Emits { |
|
(event: 'init', player: any): void |
|
} |
|
|
|
const videoPlayer = ref<HTMLElement>() |
|
|
|
const player = ref() |
|
|
|
onMounted(() => { |
|
if (!videoPlayer.value) return |
|
player.value = new Plyr(videoPlayer.value, { |
|
previewThumbnails: {}, |
|
}) |
|
emit('init', player.value) |
|
}) |
|
|
|
onBeforeUnmount(() => { |
|
if (player.value) { |
|
player.value.destroy() |
|
} |
|
}) |
|
</script> |
|
|
|
<template> |
|
<video |
|
ref="videoPlayer" |
|
controls |
|
crossorigin |
|
playsinline |
|
:class="{ |
|
'!w-128 !h-72': isAudio(title ?? '', mimeType), |
|
[props.class]: props.class, |
|
}" |
|
class="videoplayer w-full" |
|
> |
|
<source v-for="(source, id) in props.src" :key="id" :src="source" :type="mimeType" /> |
|
</video> |
|
</template> |
|
|
|
<style scoped lang="scss"></style>
|
|
|