1

components/questionJiexi/questionJiexi.vue

@@ -1,6 +1,6 @@
 <template>
 	<uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
-	 mask-background-color="rgba(255, 255, 255, 0.6);" class="ezy-popup-width-all">
+		mask-background-color="rgba(255, 255, 255, 0.6);" class="ezy-popup-width-all">
 		<view class="ezy-dajx-page">
 			<view class="icon-title-navBar-box">
 				<view @click="handleBack" class="nav-bar-icon"></view>
@@ -12,35 +12,198 @@
 					<view class="slfx-title"></view>
 					<view class="slfx-content"> {{data.answer}}</view>
 					<!-- <view class="slfx-content"> {{data.answer}}</view> -->
-					
+
 					<!-- 视频讲解 -->
 					<view class="spjj-title"></view>
 					<view class="spjj-video-box">
-						<!-- 播放和放大按钮不用可以删除 -->
-						<view class="play-btn"></view>
-						<view class="scale-btn"></view>
 						<!-- 这里放视频 ↓ -->
-						<view class="spjj-video"></view>
+						<view class="spjj-video" ref="videoContent" id="wgy-player-test" :playAuth="playAuth"
+							:change:playAuth="renderScript.receiveMsg" 
+							 :seekTime="seekTime"
+							:change:seekTime="renderScript.seekTimeFun">
+						</view>
 					</view>
 				</view>
 			</view>
 		</view>
-		
+
 	</uni-popup>
 </template>
+<script>
+	import {
+		onLoad,
+		onReady
+	} from '@dcloudio/uni-app';
+	import {
+		videoPolicy,
+		getVideoAuth,
+		getVideoRefresh
+	} from "@/api/shipin.js"
+	export default { 
+		data() {
+			return {
+				pageData: null, //上个页面获取的视频参数（视频id）
+				playAuth: "", //播放凭证
+				progressMarkers: [],
+				videoId: "", //阿里云视频id
+				seekTime: '',
+				data:{}
+
+			}
+		},
+		methods: {
+			showPopup(item){
+				this.data = item;
+				//this.videoId = item.jiangjie
+				this.videoId = 'b997f16cb9cb474cb93526cff77d8801'
+			//	this.progressMarkers = item.progressMarkers
+				this.getLive(); //获取播放凭证
+				this.$refs.popupRef.open()
+			},
+			handleBack(item){
+				this.$refs.popupRef.close()
+			},
+			getLive() {
+				let req = {
+					videoId: this.videoId
+				}
+				getVideoAuth(req).then(res => {
+					this.playAuth = res.data
+				})
+			},
+			markersClick(data) {
+				console.log(data)
+				this.seekTime = data.offset
+			},
+		
+
+		},
+		created() {
+			// console.log("getLive")
+			// this.getLive(); //获取播放凭证
+
+		},
 
-<script setup>
-	import { ref,unref } from "vue";
-	const popupRef = ref(null);
-	let data = {};
-	function showPopup(item) {
-		data = item;
-		popupRef.value.open()
-	}
-	
-	function handleBack() {
-		popupRef.value.close()
 	}
-	
-	defineExpose({showPopup})
 </script>
+
+
+
+<script module="renderScript" lang="renderjs">
+	export default {
+		mounted() {
+			console.log("renderScript1")
+			// 在适合的生命周期，通过script和link标签引入播放器sdk、css
+			this.loadWebPlayerSDK()
+		},
+		data() {
+			return {
+				player: null,
+				playAuth: '',
+				progressMarkers: [],
+				seekTime: ''
+
+			}
+		},
+		methods: {
+			receiveMsg(newValue, oldValue, ownerInstance, instance) {
+				if (newValue) {
+					this.playAuth = newValue
+					this.playAli()
+				}
+			},
+			progressMarkersMsg(newValue, oldValue, ownerInstance, instance) {
+				if (newValue) {
+					this.progressMarkers = newValue
+				}
+			},
+			seekTimeFun(newValue, oldValue, ownerInstance, instance) {
+				if (newValue) {
+					console.log(newValue, 'newValuenewValuenewValuenewValuenewValue')
+					console.log(this.player.getStatus(), 'newValuenewValuenewValuenewValuenewValue')
+					switch (this.player.getStatus()) {
+						case 'init':
+							break;
+						case 'ready':
+							break;
+						case 'loading':
+						 this.player.play()
+						this.player.seek(newValue)
+							break;
+						case 'play':
+							this.player.seek(newValue)
+							break;
+						case 'pause':
+						this.player.play()
+						this.player.seek(newValue)
+							break;
+						case 'playing':
+						this.player.seek(newValue)
+							break;
+						case 'waiting':
+							break;
+						case 'error':
+							break;
+						case 'ended':
+							break;
+						default:
+							break;
+					}
+					//	this.player.seek(newValue)
+				}
+			},
+			playAli() {
+				//配置播放器
+				var player = new Aliplayer({
+					id: "wgy-player-test",
+					"vid": 'b997f16cb9cb474cb93526cff77d8801',
+					"playauth": this.playAuth,
+					// "playConfig": {
+					// 	"EncryptType": 'AliyunVoDEncryption'
+					// },
+					"qualitySort": "asc",
+					"format": "m3u8",
+					"mediaType": "video",
+					"encryptType": 1,
+					"progressMarkers": this.progressMarkers,
+					"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();
+
+				});
+			},
+
+
+			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>