forked from BRETT/BRETT
57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import type Plyr from 'plyr'
|
|
import 'plyr/dist/plyr.css'
|
|
|
|
defineProps<{
|
|
src: string
|
|
}>()
|
|
|
|
const videoEl = ref<HTMLVideoElement | null>(null)
|
|
const aspect = ref<number | null>(null)
|
|
let player: Plyr | null = null
|
|
|
|
onMounted(async () => {
|
|
if (!videoEl.value) return
|
|
const { default: PlyrClass } = await import('plyr')
|
|
player = new PlyrClass(videoEl.value, {
|
|
disableContextMenu: false,
|
|
storage: { enabled: true, key: '4brett-player' },
|
|
})
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
player?.destroy()
|
|
player = null
|
|
})
|
|
|
|
function onLoadedMetadata() {
|
|
const v = videoEl.value
|
|
if (v?.videoWidth && v.videoHeight) {
|
|
aspect.value = v.videoWidth / v.videoHeight
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="video-player mx-auto w-full max-w-4xl"
|
|
:style="aspect ? { maxWidth: `min(100%, 56rem, calc(80vh * ${aspect}))` } : undefined"
|
|
>
|
|
<video
|
|
ref="videoEl"
|
|
:src="src"
|
|
playsinline
|
|
controls
|
|
class="rounded-md"
|
|
@loadedmetadata="onLoadedMetadata"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.video-player {
|
|
--plyr-color-main: var(--accent);
|
|
--plyr-border-radius: var(--radius-md);
|
|
}
|
|
</style>
|