ceshi

pages/study/lookShipin.vue

@@ -1,22 +1,18 @@
 <template>
 	<view id="player-con"></view>
 </template>
-
-<script setup>
-	import {
-		videoPolicy,
-		getVideoAuth,
-		getVideoRefresh
-	} from "@/api/shipin.js"
-	import {
-		onLoad,
-		onReady
-	} from '@dcloudio/uni-app';
-	import {
-		ref,
-		onMounted,
-		reactive
-	} from "vue"
+<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
@@ -33,94 +29,82 @@
 			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: '',
-	})
-	onReady(() => {
 
-		}),
-		onLoad(() => {
+	export default {
+		data() {
+			return {
+				pageData: {
+					playauth: ''
+				}
+			};
+		},
+		mounted() {
+			console.log(111111)
 			loadWebPlayerSDK().then(() => {
-			getPlayAuth()
+				//	this.getPlayAuth()
+				this.playAli()
 			}).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
+		},
+		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.')
+				});
+			}
 		}
-		var player = new Aliplayer(configData, function(player) {
-			console.log('The player is created.')
-		});
 	}
 </script>

pages/study/lookShipin3.vue

@@ -0,0 +1,150 @@
+<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>