<template> <video ref="player" :poster="poster" crossorigin="anonymous" class="player video-js vjs-big-play-centered" @playing="$emit('play')" @pause="$emit('pause')" /> </template> <script> import videoJs from 'video.js'; import 'videojs-vr/dist/videojs-vr.min'; function updatePlayer() { this.player.src(this.getPath(this.video)); this.player.poster(this.poster); } function initPlayer() { this.player = videoJs(this.$refs.player, { controls: true, inactivityTimeout: 1000, controlBar: { pictureInPictureToggle: false, volumePanel: { inline: false, }, }, }, () => { this.player.src(this.getPath(this.video)); if (this.video.isVr) { this.player.vr({ projection: '180' }); } }); } export default { props: { video: { type: Object, default: null, }, poster: { type: String, default: null, }, }, data() { return { player: null, }; }, emits: ['play', 'pause'], watch: { video: updatePlayer, poster: updatePlayer, }, mounted: initPlayer, }; </script> <style lang="scss"> .player.video-js { .vjs-poster { background-size: cover; } .vjs-control-bar { background-color: var(--darken); } .vjs-slider { background-color: var(--darken-weak); } .vjs-play-progress { background-color: var(--primary); .vjs-time-tooltip { color: var(--darken-strong); } } .vjs-load-progress { background-color: var(--lighten-weak); div { background-color: var(--darken-weak); } } .vjs-mouse-display .vjs-time-tooltip { background-color: var(--darken-strong); } .vjs-remaining-time { line-height: 2rem; font-size: .75rem; font-weight: bold; } .vjs-big-play-button { background-color: var(--darken); 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(--lighten-strong); } .vjs-error-display { overflow: hidden; } .vjs-modal-dialog-content { white-space: normal; } &:hover { .vjs-big-play-button { background-color: var(--primary); } } } </style>