traxxx/assets/components/video/player.vue

132 lines
2.0 KiB
Vue

<template>
<video
ref="player"
:poster="poster"
crossorigin="anonymous"
class="player video-js vjs-big-play-centered"
@playing="$emit('play')"
@pause="$emit('pause')"
>
<source
:src="getPath(video)"
type="video/mp4"
>
</video>
</template>
<script>
import videoJs from 'video.js';
import 'videojs-vr/dist/videojs-vr.min';
function mounted() {
this.player = videoJs(this.$refs.player, {
controls: true,
inactivityTimeout: 1000,
controlBar: {
pictureInPictureToggle: false,
volumePanel: {
inline: false,
},
},
}, () => {
if (this.video.isVr) {
this.player.vr({ projection: '180' });
}
});
}
export default {
props: {
video: {
type: Object,
default: null,
},
poster: {
type: String,
default: null,
},
},
mounted,
};
</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>