uniProject/components/videoPlay/videoPlay.vue

<template>
	<view>
		<view ref="videoContent" id="wgy-player-test" :playAuth="playAuth" :change:playAuth="renderScript.receiveMsg"
			:videoId="videoId" :change:videoId="renderScript.videoIdFun" 
			:playCount="playCount" :change:playCount="renderScript.playVideo"
			:status="hideFlag"
			:change:hideFlag="renderScript.hideFlagFun" :seekTime="seekTime" :change:seekTime="renderScript.seekTimeFun"
			class="kecheng-video">
				<zmm-watermark :watermark="watermark" color="#999" column="2" margin="24" opacity="0.1"></zmm-watermark>
		</view>
	</view>
</template>

<script>
		import { nextTick } from "vue";
import cacheManager from "@/utils/cacheManager.js";
	export default {
		name: "videoPlay",
		data() {
			return {
				playAuth: "", //播放凭证
				hideFlag: 'show',
				videoId: "", //阿里云视频id
				seekTime: '',
				playCount: 0,
				watermark: `<h5>${cacheManager.get("auth").userName}-${cacheManager.get("auth").jzName}"</h5>`
			};
		},
		onUnload() {
			// 切换
			this.hideFlag = 'hide'
		},
		onHide() {
			this.hideFlag = 'hide'
		},
		methods: {
			init(options) {
				this.videoId = options.videoId;
				this.seekTime = options.seekTime;
				this.setSeekTime(options.seekTime)
				const isPlay = options.isPlay || false;
				setTimeout(() => { 
					this.playAuth = options.playAuth; // 最后赋值
					if(isPlay) {
						this.playCount++
					}
				}, 300)
				
			},
			setSeekTime(seekTime) {
				this.seekTime = '';
				this.$nextTick(() => {
					this.seekTime = seekTime;
				})
			},
			handlePause() {
				this.$emit('play-pause')
			},
			handlePlay() {
				this.$emit('play-play')
			},
			playEnd() {
				this.$emit('play-end')
			},
			handleTimeupdate(timer) {
				this.$emit('play-timeupdate',timer)
			}
		}
	}
</script>

<script module="renderScript" lang="renderjs">
	export default {
		data() {
			return {
				player: null,
				playAuth: '',
				videoId: '',
			}
		},
		methods: {
			playVideo() {
				setTimeout(() => {
					this.player && this.player.play()
				}, 300);
			},
			receiveMsg(newValue, oldValue, ownerInstance, instance) {
				if (newValue) {
					this.playAuth = ''
					this.playAuth = newValue
					this.loadWebPlayerSDK()
				}
			},
			videoIdFun(newValue, oldValue, ownerInstance, instance) {
				if (newValue) {
					this.videoId = ''
					this.videoId = newValue
				}
			},
			hideFlagFun(newValue, oldValue, ownerInstance, instance) {
				if (this.player) {
					this.player.pause()
				}
			},
			seekTimeFun(newValue, oldValue, ownerInstance, instance) {
				if (newValue) {
					this.player && this.player.seek(newValue)
					console.log('已设置时间',newValue)
				}
			},
			playAli() {
				let that = this
				//配置播放器
				if (!this.playAuth) {
					return false;
				}
				console.log('ccccxx',this.videoId)
				console.log('xxxx',this.playAuth)
				let player = new Aliplayer({
					id: "wgy-player-test",
					vid: this.videoId,
					playauth: this.playAuth,
					extraInfo: {
						poster: 'noposter'
					},
					skinLayout: [{
							name: "bigPlayButton",
							align: "blabs",
							x: 30,
							y: 80
						},
						{
							name: "H5Loading",
							align: "cc"
						},
						{
							name: "controlBar",
							align: "blabs",
							x: 0,
							y: 0,
							children: [{
									name: "progress",
									align: "blabs",
									x: 0,
									y: 44
								},
								{
									name: "playButton",
									align: "tl",
									x: 15,
									y: 12
								},
								// {
								// 	name: "fullScreenButton",
								// 	align: "tr",
								// 	x: 10,
								// 	y: 12
								// },
								{
									name: "timeDisplay",
									align: "tr",
									x: 10,
									y: 5
								}
							]
						}
					],
					qualitySort: "asc",
					format: "mp4",
					mediaType: "video",
					encryptType: 1,
					autoplay: false,
					isLive: false,
					rePlay: false,
					playsinline: true,
					preload: false,
					controlBarVisibility: "hover",
					useH5Prism: true

				}, function(player) {
					console.log('ppp', player)
				}, (err) => {
					console.log('ccccxxxzzzzaa', err)
				});
				this.player = player;
				player.on('canplay', function() {
					player.tag.play();
				});
				player.on('ended', function() {
					that.$ownerInstance.callMethod('playEnd', {
						data: 'end'
					})
				});
				player.on('pause', function() {
					that.$ownerInstance.callMethod('handlePause')
				});
				player.on('play', function() {
					that.$ownerInstance.callMethod('handlePlay')
				});
				player.on('timeupdate', function(time) {
					that.$ownerInstance.callMethod('handleTimeupdate',time.target.childNodes[0].currentTime)
				});
				
				
			},
			isHasScript() {
				let scriptExists = false;
				for (let script of document.scripts) {
					if (script.src === 'https://g.alicdn.com/de/prismplayer/2.9.6/aliplayer-min.js') {
						scriptExists = true;
						break;
					}
				}
				return scriptExists
			},
			loadWebPlayerSDK() {
				if (this.player) {
					this.player.dispose();
				}
				if (this.isHasScript()) {
					this.playAli()
					return;
				}
				return new Promise((resolve, reject) => {
					const s_tag = document.createElement('script'); // 引入播放器js
					s_tag.type = 'text/javascript';
					s_tag.src = 'https://g.alicdn.com/de/prismplayer/2.9.6/aliplayer-min.js';
					s_tag.charset = 'utf-8';
					s_tag.onload = () => {
						//	console.log(this.playAuth);
						setTimeout(() => {
							this.playAli()
						}, 10);
						resolve();
					}
					document.body.appendChild(s_tag);
					const l_tag = document.createElement('link'); // 引入播放器css
					l_tag.rel = 'stylesheet';
					l_tag.href =
						'https://g.alicdn.com/de/prismplayer/2.9.6/skins/default/aliplayer-min.css';
					document.body.appendChild(l_tag);
				});
			},
		}
	}
</script>

<style lang="scss">

</style>