uniProject/pages/study/lookShipin.vue

<template>
	<view ref="videoContent" id="wgy-player-test" :playAuth="playAuth" :change:playAuth="renderScript.receiveMsg">
	</view>
</template>

<script>
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		videoPolicy,
		getVideoAuth,
		getVideoRefresh
	} from "@/api/shipin.js"
	export default {
		data() {
			return {
				options: {}, //上个页面获取的视频参数（视频id）
				playAuth: "", //播放凭证
				videoId: "", //阿里云视频id
				videoData: {
					playauth: '',
					videoId: 'b997f16cb9cb474cb93526cff77d8801',
				}, //阿里云视频其他参数
			}
		},
		methods: {
			getLive() {
				let req = {
					videoId: this.videoData.videoId
				}
				getVideoAuth(req).then(res => {
					this.playAuth = res.data
					//	console.log(this.videoData)
					//this.playAli()
				})
			},

		},
		created() {
			console.log("getLive")
			this.getLive(); //获取播放凭证

		},

	}
</script>



<script module="renderScript" lang="renderjs">
	export default {
		mounted() {
			console.log("renderScript1")
			// 在适合的生命周期，通过script和link标签引入播放器sdk、css
			this.loadWebPlayerSDK()
		},
		data() {
			return {
				player: null,
				playAuth: '',

			}
		},
		methods: {
			receiveMsg(newValue, oldValue, ownerInstance, instance) {
				console.log('service层中的options发生变化')
				console.log('新值', newValue)
				console.log('旧值', oldValue)
				// ownerInstance和this.$ownerInstance一样，可用来向service层通信
				// instance和ownerInstance的区别是：
				// instance.$el指向的是触发事件的那个节点；ownerInstance.$el指向当前vue文件中的根节点；
				// instance的作用目前尚不明确，官方没有给出用法
				if (newValue) {
					this.playAuth = newValue
					this.playAli()
				}
			},
			playAli() {
				//配置播放器
				var player = new Aliplayer({
					id: "wgy-player-test",
					"vid": 'b997f16cb9cb474cb93526cff77d8801',
					"playauth": this.playAuth,
					"encryptType": 1,
					// "playConfig": {
					// 	"EncryptType": 'AliyunVoDEncryption'
					// },
					"qualitySort": "asc",
					"format": "m3u8",
					"mediaType": "video",
					"encryptType": 1,
					"progressMarkers": [{
						offset: 30,
						isCustomized: true,
						coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/9A3F562E595E4764AD1DD546FA52C6E5-6-2.png',
						title: 'test title',
						describe: 'test string',
					}, {
						offset: 150,
						isCustomized: true,
						coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/1E7F402241CD4C0F94AD2BBB5CCC3EC7-6-2.png',
						title: 'test title',
						describe: 'test string',
					}, {
						offset: 250,
						isCustomized: true,
						coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
						title: 'test title',
						describe: 'test string',
					}, {
						offset: 550,
						isCustomized: true,
						coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
						title: 'test title',
						describe: 'test string',
					}, {
						offset: 320,
						isCustomized: true,
						coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
						title: 'test title',
						describe: 'test string',
					}],
					"width": '100%',
					"height": '500px',
					"autoplay": false,
					"isLive": false,
					"rePlay": false,
					"playsinline": true,
					"preload": false,
					"controlBarVisibility": "hover",
					"useH5Prism": true

				}, function(player) {});
				this.player = player;
				player.one('canplay', function() {
					console.log('canplay', this.player.tag);
					player.tag.play();

				});
			},
			//监听获取播放凭证的方法
			checkValue() {
				console.log(this.videoId, this.authId, "1111888888")
				if (!this.videoData.playAuth) {
					setTimeout(() => {
						this.checkValue();
					}, 1000);
				} else {
					this.getLive();
				}
			},

			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 = () => {
						//	this.checkValue();
						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>