<template> <video ref="player" :poster="poster" crossorigin="anonymous" class="player video-js vjs-big-play-centered" @playing="emit('play')" @pause="emit('pause')" /> </template> <script setup> import { ref, watch, onMounted } from 'vue'; import videoJs from 'video.js'; // import 'videojs-vr/dist/videojs-vr.min'; import getPath from '#/src/get-path.js'; const props = defineProps({ video: { type: Object, default: null, }, poster: { type: String, default: null, }, }); const emit = defineEmits(['play', 'pause']); const player = ref(null); function updatePlayer() { player.value.src(getPath(props.video)); player.value.poster(props.poster); } function initPlayer() { player.value = videoJs(player.value, { controls: true, inactivityTimeout: 1000, controlBar: { pictureInPictureToggle: false, volumePanel: { inline: false, }, }, }, () => { player.value.src(getPath(props.video)); if (props.video.isVr) { player.value.vr({ projection: '180' }); } }); } onMounted(() => { if (typeof window !== 'undefined') { window.HELP_IMPROVE_VIDEOJS = false; } initPlayer(); }); watch(() => props.video, () => updatePlayer()); watch(() => props.poster, () => updatePlayer()); </script> <style> .player.video-js { .vjs-poster { background-size: cover; } .vjs-control-bar { background-color: var(--shadow); } .vjs-slider { background-color: var(--shadow-weak-10); } .vjs-play-progress { background-color: var(--primary); .vjs-time-tooltip { color: var(--shadow-strong-10); } } .vjs-load-progress { background-color: var(--highlight-weak-10); div { background-color: var(--shadow-weak-10); } } .vjs-mouse-display .vjs-time-tooltip { background-color: var(--shadow-strong-10); } .vjs-remaining-time { line-height: 2rem; font-size: .75rem; font-weight: bold; } .vjs-big-play-button { background-color: var(--shadow); width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; border: none; border-radius: 50%; .vjs-icon-placeholder { font-size: 2.5rem; line-height: 4rem; } &:hover { background-color: var(--primary); } } .vjs-control:focus::before, .vjs-control:hover::before, .vjs-control:focus { text-shadow: 0 0 .5rem var(--highlight-strong-10); } .vjs-error-display { overflow: hidden; } .vjs-modal-dialog-content { white-space: normal; } &:hover { .vjs-big-play-button { background-color: var(--primary); } } } </style>