uniProject/pages/xinshuxue/components/videoPlay.vue

<template>
	<view class="ezy-video-box course-video-box">
		<view ref="videoContent" id="video-play1" :playAuth="playAuth1"
			:change:playAuth="renderScript.receiveMsg" :videoId="videoId1" :change:videoId="renderScript.videoIdFun"
			:hideFlag="hideFlag1" :change:hideFlag="renderScript.hideFlagFun" :progressMarkers="progressMarkers1"
			:change:progressMarkers="renderScript.progressMarkersMsg" :seekTime="seekTime1"
			:change:seekTime="renderScript.seekTimeFun" class="ezy-video">
		</view>
	</view>
</template>

<script>
	import {MyRenderEventBus} from "./renderEvents"
	export default {
		name: "videoPlay",
		props: {
			cId: {
				type: String,
			},
			progressMarkers1: {
				type: Array,
				default: () => ([])
			},
			videoId1: {
				type: String,
			},
			playAuth1: {
				type: String,
			},
			seekTime1: {
				type: String
			},
			hideFlag1: {
				type: String
			}
		},
		data() {
			return {}
		},
		methods: {
			handleStop() {
				MyRenderEventBus.$emit('video-play1')
			}
		}
	}
</script>

<script module="renderScript" lang="renderjs">
		import {MyRenderEventBus} from "./renderEvents";
	export default {
		mounted() {
			MyRenderEventBus.$on(`video-play1`, this.stopPlayer)
		},
		Unmounted() {
			MyRenderEventBus.$ff(`video-play1`, this.stopPlayer)
		},
		data() {

			return {
				player: null,
				playAuth: '',
				videoId: '',
				progressMarkers: [],
				isFullScreen: false,
				seekTime: '',
			}
		},
		methods: {
			stopPlayer() {
				this.player && this.player.pause();
			},
			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()
				}
			},
			progressMarkersMsg(newValue, oldValue, ownerInstance, instance) {
				if (newValue) {
					this.progressMarkers = newValue
				}
			},
			seekTimeFun(newValue, oldValue, ownerInstance, instance) {
				if (newValue) {
					this.player.play()
					this.player.seek(newValue)
				}
			},
			playAli() {
				let that = this
				//配置播放器
				if (!this.playAuth) {
					return false;
				}
				var player = new Aliplayer({
					id: 'video-play1',
					"vid": this.videoId,
					"playauth": this.playAuth,
					extraInfo: {
						poster: 'noposter'
					},
					fullscreenEvents: {
						fullscreenChange: (isFull) => {
							this.isFullScreen = isFull
						}
					},
					"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,
					"progressMarkers": this.progressMarkers,
					"autoplay": false,
					"isLive": false,
					"rePlay": false,
					"playsinline": true,
					"preload": false,
					"controlBarVisibility": "hover",
					"useH5Prism": true

				}, function(player) {});
				this.player = player;


				player.on('canplay', function() {
					player.tag.play();

				});

				player.on('ended', function(data) {
					that.exitFullScreen();
					that.$ownerInstance.callMethod('playEnd', {
						data: 'end'
					})
				});
			},
			exitFullScreen() {
				if (document.exitFullscreen) {
					document.exitFullscreen(); // 标准方法
				} else if (document.mozCancelFullScreen) { // Firefox
					document.mozCancelFullScreen();
				} else if (document.webkitExitFullscreen) { // Chrome, Safari & Opera
					document.webkitExitFullscreen();
				} else if (document.msExitFullscreen) { // IE/Edge
					document.msExitFullscreen();
				}
			},

			loadWebPlayerSDK() {
				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);
						this.playAli()
						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>