uniProject/pages/study/lookShipin3.vue

<template>
	<view id="player-con"></view>
</template>

<script setup module="openlayers" lang="renderjs"  >
	import {
		videoPolicy,
		getVideoAuth,
		getVideoRefresh
	} from "@/api/shipin.js"
	import {
		ref,
		onMounted,
		reactive
	} from "vue"
	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);
		});
	}
	let videoUrl = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
	let pageData = reactive({
		type: '',
		partUrl: '',
		downloadUrl: '',
		videoId: '',
		uploadAddress: '',
		uploadAuth: '',
		signature: '',
		playauth: '',
	})
	
	
	onMounted(()=>{
		
		
		console.log(111)
	    loadWebPlayerSDK().then(() => {
	        // 如果需要使用自定义组件，打开以下注释
	        // this.loadComponent().then(() => {
	        let player = new Aliplayer({
	          id: "url-player-test",
	          source: "//player.alicdn.com/video/aliyunmedia.mp4",
	          width: "100%",
	          height: "100%",
	        }, function (player) {
	        });
	        player.one('canplay', function () {
	          console.log('canplay', player.tag);
	          player.tag.play();
	        });
	        // }).catch((e) => { console.log("加载组件失败", e) })
	      }).catch((e) => {
	        console.log("加载播放器SDK失败", e);
	      });
	    
	
	})

	
	
	
	// 	onMounted(() => {
	// 		loadWebPlayerSDK().then(() => {
	// 		getPlayAuth()
	// 		}).catch((e) => {
	// 			console.log("加载播放器SDK失败", e);
	// 		});
	// 	})
	// function getVideoId(){
	// 	let req  ={
	// 		fileName:videoUrl,
	// 		title:"测试视频"
	// 	}
	// 	videoPolicy(req).then(res=>{
	// 		pageData.videoId = res.data.videoId
	// 		getPlayAuth()
	// 	})
	// }

	function getPlayAuth() {
		let req = {
			videoId: 'b997f16cb9cb474cb93526cff77d8801'
		}
		getVideoAuth(req).then(res => {
			pageData.playauth = res.data
			playAli()
		})
	}

	function playAli() {
		let configData = {
			"id": "player-con",
			"vid": 'b997f16cb9cb474cb93526cff77d8801',
			"playauth": 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>