traxxx/assets/components/video/player.vue

<template>
	<video
		ref="player"
		:poster="poster"
		class="player video-js vjs-big-play-centered"
		@playing="$emit('play')"
		@pause="$emit('pause')"
	>
		<source
			:src="`/media/${video.path}`"
			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);
	}

	&:hover {
		.vjs-big-play-button {
			background-color: var(--primary);
		}
	}
}
</style>