OnlineEducation-teacher-front/src/views/myResource/file/box/videoPreview/VideoPlayer.vue

<template>
	<video ref="videoPlayer" class="video-js"></video>
</template>

<script setup>
	import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
	import videojs from 'video.js'
	import 'video.js/dist/video-js.css'

	const props = defineProps({
		source: {
			type: Object,
			default: () => ({})
		}
	})

	const videoPlayer = ref(null)
	let player = null

	// 播放器配置
	const options = {
		playbackRates: [0.5, 1.0, 1.5, 2.0],
		autoplay: false,
		muted: false,
		loop: false,
		preload: 'auto',
		language: 'zh-CN',
		aspectRatio: '16:9',
		fluid: true,
		sources: [props.source],
		notSupportedMessage: '此视频暂无法播放，请稍后再试',
		controls: true,
		controlBar: {
			timeDivider: true,
			durationDisplay: true,
			remainingTimeDisplay: false,
			fullscreenToggle: true
		}
	}

	watch(
		() => props.source,
		(newSource) => {
			if (player) {
				player.pause()
				player.currentTime(0)
				player.src(newSource)
				player.play()
			}
		}
	)

	onMounted(() => {
		player = videojs(videoPlayer.value, options)
		window.videojs = videojs
		// 使用 require 加载中文语言包
		import('video.js/dist/lang/zh-CN.js')
	})

	onBeforeUnmount(() => {
		if (player) {
			player.dispose()
			player = null
		}
	})
</script>

<style lang="less" scoped>
	@import '@/style/myResource/varibles.less';

	.video-js {
		width: 100%;
		height: 100%;
		padding: 0;
		color: @primary-color;

		:deep(.vjs-big-play-button) {
			border-radius: 50%;
			border: 6px solid @primary-color;
			left: calc(50% - 1em);
			top: calc(50% - 1em);
			width: 2.5em;
			height: 2.5em;
			line-height: 2.5em;
			background: transparent;
			box-sizing: content-box;

			.vjs-icon-placeholder:before {
				font-size: 48px;
			}

			&:hover {
				opacity: 0.6;
			}
		}

		:deep(.vjs-volume-level),
		:deep(.vjs-play-progress),
		:deep(.vjs-slider-bar) {
			background: @primary-color;
		}

		:deep(.vjs-control-bar) {
			font-size: 14px;
		}
	}
</style>