easydo-ops/src/components/scVideo/index.vue

<!--
 * @Descripttion: xgplayer二次封装
 * @version: 1.1
 * @Date: 2021年11月29日12:10:06
 * @LastEditTime: 2023年12月22日12:02:50
-->

<template>
	<div class="sc-video" ref="scVideo">
		<div v-if="showMask" class="sc-video__start-mock" @click="$emit('play')"></div>
	</div>
</template>

<script>
	import Player from 'xgplayer';
	import HlsPlayer from 'xgplayer-hls';

	export default {
		emits: ["play"],
		props: {
			showMask: { type: Boolean, default: false },
			src: { type: String, required: true, default: "" },
			autoplay: { type: Boolean, default: false },
			controls: { type: Boolean, default: true },
			loop: { type: Boolean, default: false },
			isLive: { type: Boolean, default: false },
			options: { type: Object, default: () => {} }
		},

		data() {
			return {
				player: null
			}
		},
		watch: {
			src(val) {
				if (this.player.hasStart) this.player.src = val;
				else this.player.start(val);
			}
		},
		mounted() {
			if (this.isLive) this.initHls();
			else this.init();
		},
		methods: {
			init() {
				this.player = new Player({
					el: this.$refs.scVideo,
					url: this.src,
					autoplay: this.autoplay,
					loop: this.loop, // 循环播放
					controls: this.controls,
					fluid: true, // 播放器宽度跟随父元素的宽度大小变化
					videoInit: true, // 初始化显示视频首帧
					lang: 'zh-cn',
					...this.options
				});
			},
			initHls() {
				this.player = new HlsPlayer({
					el: this.$refs.scVideo,
					url: this.src,
					autoplay: this.autoplay,
					loop: this.loop,
					controls: this.controls,
					fluid: true,
					videoInit: true, // 初始化显示视频首帧
					isLive: true,
					ignores: ['time','progress'],
					lang: 'zh-cn',
					...this.options
				});
			}
		}
	}
</script>

<style scoped>
.sc-video:deep(.danmu) > * {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000,
    1px -1px 0 #000;
}

.sc-video__start-mock {
  cursor: pointer;
  width: 70px;
  height: 70px;
  position: absolute;
  left: calc(50% - 35px);
  top: calc(50% - 35px);
  z-index: 120;
}

.sc-video:deep(.xgplayer-controls) {
  background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
}

.sc-video:deep(.xgplayer-progress-tip) {
  border: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  line-height: 25px;
  padding: 0 10px;
  border-radius: 25px;
}

.sc-video:deep(.xgplayer-enter-spinner) {
  width: 50px;
  height: 50px;
}
</style>