uniProject/pages/study/lookShipin.vue

<template>
	<view id="player-con"></view>
</template>
<script module="aa" lang="renderjs">
		//#ifdef H5
		import {
			videoPolicy,
			getVideoAuth,
			getVideoRefresh
		} from "@/api/shipin.js"
		//#endif	
		//#ifdef APP-PLUS
	const {	videoPolicy,getVideoAuth,getVideoRefresh} = require("../../api/shipin.js")
		//#endif
 
	const loadWebPlayerSDK = async () => {
		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 = () => {
				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);
		});
	}

	export default {
		data() {
			return {
				pageData: {
					playauth: ''
				}
			};
		},
		mounted() {
			console.log(111111)
			loadWebPlayerSDK().then(() => {
				//	this.getPlayAuth()
				this.playAli()
			}).catch((e) => {
				console.log("加载播放器SDK失败", e);
			});
		},
		methods: {
			getPlayAuth() {
				let req = {
					videoId: 'b997f16cb9cb474cb93526cff77d8801'
				}
				getVideoAuth(req).then(res => {
					this.pageData.playauth = res.data
					this.playAli()
				})
			},
			playAli() {
				let configData = {
					"id": "player-con",
					"vid": 'b997f16cb9cb474cb93526cff77d8801',
					"playauth": this.pageData.playauth,
					"qualitySort": "asc",
					"format": "m3u8",
					"mediaType": "video",
					"encryptType": 1,
					"width": '100%',
					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: 50,
						isCustomized: true,
						coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/1E7F402241CD4C0F94AD2BBB5CCC3EC7-6-2.png',
						title: 'test title',
						describe: 'test string',
					}, {
						offset: 150,
						isCustomized: true,
						coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
						title: 'test title',
						describe: 'test string',
					}, {
						offset: 120,
						isCustomized: true,
						coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
						title: 'test title',
						describe: 'test string',
					}],
					"height": '500px',
					"autoplay": false,
					"isLive": false,
					"rePlay": false,
					"playsinline": true,
					"preload": false,
					"controlBarVisibility": "hover",
					"useH5Prism": true
				}
				var player = new Aliplayer(configData, function(player) {
					console.log('The player is created.')
				});
			}
		}
	}
</script>