baiyuApp/pages_course/components/FeaturedCommentXgPlayer.vue

<template>
	<view class="fc-xg-player-host rating-msg-video">
		<!-- #ifdef MP-WEIXIN -->
		<video
			:id="playerId"
			class="fc-xg-player-mp-video"
			:src="videoUrl"
			:poster="poster"
			:controls="false"
			object-fit="fill"
			:show-play-btn="false"
			:show-center-play-btn="false"
			:enable-progress-gesture="false"
		></video>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view
			class="fc-xg-player-render"
			:fcXgPlayerConfig="fcXgPlayerConfig"
			:change:fcXgPlayerConfig="fcXgRender.onConfig"
			:fcXgPauseCmd="fcXgPauseCmd"
			:change:fcXgPauseCmd="fcXgRender.onPause"
		>
			<view :id="playerId" class="fc-xg-player-inner"></view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		name: 'FeaturedCommentXgPlayer',
		props: {
			playerId: {
				type: String,
				required: true
			},
			videoUrl: {
				type: String,
				default: ''
			},
			poster: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				fcXgPauseCmd: 0
			}
		},
		computed: {
			fcXgPlayerConfig() {
				return {
					playerId: this.playerId,
					url: this.videoUrl || '',
					poster: this.poster || ''
				}
			}
		},
		methods: {
			pause() {
				// #ifdef MP-WEIXIN
				try {
					const c = uni.createVideoContext(this.playerId, this)
					if (c && c.pause) c.pause()
				} catch (e) {}
				// #endif
				// #ifndef MP-WEIXIN
				this.fcXgPauseCmd = Date.now()
				// #endif
			}
		}
	}
</script>

<script module="fcXgRender" lang="renderjs">
	const XG_SCRIPT = 'https://unpkg.byted-static.com/xgplayer/3.0.20/dist/index.min.js';
	const XG_CSS = 'https://unpkg.byted-static.com/xgplayer/3.0.20/dist/index.min.css';

	export default {
		data() {
			return {
				player: null,
				lastConfig: null
			};
		},
		beforeDestroy() {
			this._destroyPlayer();
		},
		methods: {
			_ensureXgAssets(cb) {
				const run = () => {
					this._ensureStyles();
					cb();
				};
				if (typeof window.Player === 'function') {
					run();
					return;
				}
				if (window.__fcXgScriptLoading) {
					window.__fcXgScriptLoading.then(run);
					return;
				}
				window.__fcXgScriptLoading = new Promise((resolve) => {
					if (!document.querySelector('link[data-fc-xg-css]')) {
						const link = document.createElement('link');
						link.rel = 'stylesheet';
						link.href = XG_CSS;
						link.setAttribute('data-fc-xg-css', '1');
						document.head.appendChild(link);
					}
					const script = document.createElement('script');
					script.src = XG_SCRIPT;
					script.onload = () => resolve();
					script.onerror = () => resolve();
					document.head.appendChild(script);
				});
				window.__fcXgScriptLoading.then(run);
			},
			_ensureStyles() {
				if (document.querySelector('style[data-fc-xg-inline]')) return;
				const style = document.createElement('style');
				style.setAttribute('data-fc-xg-inline', '1');
				style.textContent = [
					'.fc-xg-player-host, .fc-xg-player-render, .fc-xg-player-inner {',
					'  width: 100% !important;',
					'  height: 100% !important;',
					'  min-height: 100% !important;',
					'}',
					'.fc-xg-player-host .xgplayer {',
					'  width: 100% !important;',
					'  height: 100% !important;',
					'  min-height: 100% !important;',
					'}',
					'.fc-xg-player-host .xgplayer video {',
					'  width: 100% !important;',
					'  height: 100% !important;',
					'  object-fit: fill !important;',
					'}'
				].join('\n');
				document.head.appendChild(style);
			},
			_destroyPlayer() {
				if (!this.player) return;
				try {
					this.player.destroy();
				} catch (e) {}
				this.player = null;
			},
			_shouldReinit(newValue, oldValue) {
				if (!this.player || !oldValue || !newValue) return true;
				return newValue.url !== oldValue.url || newValue.playerId !== oldValue.playerId;
			},
			_waitDom(playerId, cb, attempt = 0) {
				const el = document.getElementById(playerId);
				if (el) {
					cb(el);
					return;
				}
				if (attempt >= 30) return;
				setTimeout(() => this._waitDom(playerId, cb, attempt + 1), 80);
			},
			_initPlayer(config) {
				const Player = window.Player;
				if (!Player || !config || !config.url || !config.playerId) return;
				const playerId = config.playerId;
				if (this.player && !this._shouldReinit(config, this.lastConfig)) {
					this.lastConfig = config;
					return;
				}
				this._destroyPlayer();
				this.lastConfig = config;
				const option = {
					lang: 'zh',
					url: config.url,
					id: playerId,
					autoplay: false,
					loop: false,
					height: '100%',
					width: '100%',
					poster: config.poster || '',
					playsinline: true,
					videoFillMode: 'fill',
					controls: false,
					ignores: [
						'progress',
						'volume',
						'time',
						'play',
						'start',
						'definition',
						'fullscreen',
						'miniplayer',
						'miniscreen',
						'keyboard',
						'playbackrate'
					],
					disableGesture: true,
					closeVideoTouch: true,
					closeVideoDblclick: true,
					closeVideoClick: true
				};
				this.player = new Player(option);
			},
			onConfig(newValue, oldValue) {
				if (!newValue || !newValue.url) {
					this._destroyPlayer();
					this.lastConfig = null;
					return;
				}
				this._ensureXgAssets(() => {
					this._waitDom(newValue.playerId, () => {
						this._initPlayer(newValue);
					});
				});
			},
			onPause() {
				if (this.player && this.player.pause) {
					try {
						this.player.pause();
					} catch (e) {}
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.fc-xg-player-host {
		width: 100%;
		height: 100%;
		min-height: 180rpx;
		display: block;
		overflow: hidden;
	}
	.fc-xg-player-render,
	.fc-xg-player-inner {
		width: 100%;
		height: 100%;
		min-height: 180rpx;
	}
	.fc-xg-player-mp-video {
		width: 100%;
		height: 100%;
		min-height: 180rpx;
		display: block;
	}
</style>