调整

pages/xinshuxue/components/videoPlay.vue

@@ -0,0 +1,223 @@
+<template>
+	<view class="ezy-video-box course-video-box">
+		<view ref="videoContent" :id="cId" :playAuth="playAuth1"
+			:change:playAuth="renderScript.receiveMsg" :videoId="videoId1" :change:videoId="renderScript.videoIdFun"
+			:hideFlag="hideFlag1" :change:hideFlag="renderScript.hideFlagFun" :progressMarkers="progressMarkers1"
+			:change:progressMarkers="renderScript.progressMarkersMsg" :seekTime="seekTime1"
+			:change:seekTime="renderScript.seekTimeFun" class="ezy-video">
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "videoPlay",
+		props: {
+			cId: {
+				type: String,
+			},
+			progressMarkers1: {
+				type: Array,
+				default: () => ([])
+			},
+			videoId1: {
+				type: String,
+			},
+			playAuth1: {
+				type: String,
+			},
+			seekTime1: {
+				type: String
+			},
+			hideFlag1: {
+				type: String
+			}
+		},
+		data() {
+			return {}
+		},
+		methods: {
+			handleStop() {
+				uni.$emit(`renderjs:video-stop${this.cId}`)
+			}
+		}
+	}
+</script>
+
+<script module="renderScript" lang="renderjs">
+	export default {
+		mounted() {
+			uni.$on(`renderjs:video-stop${this.$ownerInstance.$vm.cId}`, this.stopPlayer)
+		},
+		Unmounted() {
+			uni.$ff(`renderjs:video-stop${this.$ownerInstance.$vm.cId}`, this.stopPlayer)
+		},
+		data() {
+
+			return {
+				player: null,
+				playAuth: '',
+				videoId: '',
+				progressMarkers: [],
+				isFullScreen: false,
+				seekTime: '',
+			}
+		},
+		methods: {
+			stopPlayer() {
+				this.player && this.player.pause();
+			},
+			receiveMsg(newValue, oldValue, ownerInstance, instance) {
+				if (newValue) {
+					this.playAuth = ''
+					this.playAuth = newValue
+					this.loadWebPlayerSDK()
+
+				}
+			},
+			videoIdFun(newValue, oldValue, ownerInstance, instance) {
+				if (newValue) {
+					this.videoId = ''
+					this.videoId = newValue
+				}
+			},
+			hideFlagFun(newValue, oldValue, ownerInstance, instance) {
+				if (this.player) {
+					this.player.pause()
+				}
+			},
+			progressMarkersMsg(newValue, oldValue, ownerInstance, instance) {
+				if (newValue) {
+					this.progressMarkers = newValue
+				}
+			},
+			seekTimeFun(newValue, oldValue, ownerInstance, instance) {
+				if (newValue) {
+					this.player.play()
+					this.player.seek(newValue)
+				}
+			},
+			playAli() {
+				let that = this
+				//配置播放器
+				if (!this.playAuth) {
+					return false;
+				}
+				var player = new Aliplayer({
+					id: this.$ownerInstance.$vm.cId,
+					"vid": this.videoId,
+					"playauth": this.playAuth,
+					extraInfo: {
+						poster: 'noposter'
+					},
+					fullscreenEvents: {
+						fullscreenChange: (isFull) => {
+							this.isFullScreen = isFull
+						}
+					},
+					"skinLayout": [{
+							"name": "bigPlayButton",
+							"align": "blabs",
+							"x": 30,
+							"y": 80
+						},
+						{
+							"name": "H5Loading",
+							"align": "cc"
+						},
+						{
+							"name": "controlBar",
+							"align": "blabs",
+							"x": 0,
+							"y": 0,
+							"children": [{
+									"name": "progress",
+									"align": "blabs",
+									"x": 0,
+									"y": 44
+								},
+								{
+									"name": "playButton",
+									"align": "tl",
+									"x": 15,
+									"y": 12
+								},
+								{
+									"name": "fullScreenButton",
+									"align": "tr",
+									"x": 10,
+									"y": 12
+								},
+								{
+									"name": "timeDisplay",
+									"align": "tr",
+									"x": 10,
+									"y": 5
+								}
+							]
+						}
+					],
+					"qualitySort": "asc",
+					"format": "mp4",
+					"mediaType": "video",
+					"encryptType": 1,
+					"progressMarkers": this.progressMarkers,
+					"autoplay": false,
+					"isLive": false,
+					"rePlay": false,
+					"playsinline": true,
+					"preload": false,
+					"controlBarVisibility": "hover",
+					"useH5Prism": true
+
+				}, function(player) {});
+				this.player = player;
+
+
+				player.on('canplay', function() {
+					player.tag.play();
+
+				});
+
+				player.on('ended', function(data) {
+					that.exitFullScreen();
+					that.$ownerInstance.callMethod('playEnd', {
+						data: 'end'
+					})
+				});
+			},
+			exitFullScreen() {
+				if (document.exitFullscreen) {
+					document.exitFullscreen(); // 标准方法
+				} else if (document.mozCancelFullScreen) { // Firefox
+					document.mozCancelFullScreen();
+				} else if (document.webkitExitFullscreen) { // Chrome, Safari & Opera
+					document.webkitExitFullscreen();
+				} else if (document.msExitFullscreen) { // IE/Edge
+					document.msExitFullscreen();
+				}
+			},
+
+			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 = () => {
+						//	console.log(this.playAuth);
+						console.log('this.loadWebPlayerSDK', this.$ownerInstance.$vm.cId)
+						this.playAli()
+						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>

pages/xinshuxue/lookShipin.vue

@@ -5,17 +5,22 @@
 			<text class="nav-bar-title">{{jieInfo.jieIntro}}</text>
 		</view>
 		
-		<view class="ezy-video-box course-video-box">
+		<!-- <view class="ezy-video-box course-video-box">
 			<view ref="videoContent" id="wgy-player-test" :playAuth="playAuth"
 				:change:playAuth="renderScript.receiveMsg" :videoId="videoId" :change:videoId="renderScript.videoIdFun"
 				:hideFlag="hideFlag" :change:hideFlag="renderScript.hideFlagFun" :progressMarkers="progressMarkers"
 				:change:progressMarkers="renderScript.progressMarkersMsg" :seekTime="seekTime"
 				:change:seekTime="renderScript.seekTimeFun" class="ezy-video">
 			</view>
-		</view>
+		</view> -->
+		<videoPlayVue ref="c1" v-show="showA" :key="1" cId="wgy-player-test" :videoId1="videoId" :progressMarkers1="progressMarkers" :playAuth1="playAuth" 
+		:hideFlag1="hideFlag"   :seek-time1="seekTime"></videoPlayVue>
+		<videoPlayVue ref="c2" v-show="showB" :key="2" cId="wgy-player-test2" :videoId1="videoId2" :progressMarkers1="progressMarkers2" :playAuth1="playAuth2"
+		:hideFlag1="hideFlag2" :seek-time1="seekTime2"
+		></videoPlayVue>
 
 		<!-- 核心基础题 -->
-		<view class="course-content-border">
+		<view class="course-content-border" >
 			<view class="course-content-box">
 				<view v-for="(item,index) in jieInfo.jiedianList1" :key="index" @click="markersClick(item)">
 					<view class="title-play-box">
@@ -30,7 +35,7 @@
 		<!-- 能力提升题 -->
 		<view class="course-content-border">
 			<view class="course-content-box">
-				<view v-for="(item,index) in jieInfo.jiedianList2" :key="index" @click="markersClick(item)">
+				<view v-for="(item,index) in jieInfo.jiedianList2" :key="index" @click="markersClick2(item)">
 					<view class="title-play-box">
 						<icon class="course-icon"></icon>
 						<view class="course-title">{{item.name}}</view>
@@ -66,6 +71,7 @@
 	import cacheManager from "@/utils/cacheManager.js";
 	import * as httpApi from "@/api/chanpinShuxue.js";
 	import tishiDlVue from './components/tishiDl.vue';
+	import videoPlayVue from './components/videoPlay.vue';
 
 	export default {
 		data() {
@@ -84,27 +90,39 @@
 					video2: '',
 				},
 
+				jieId: '',
+				shipinTitle: '',
+
 				pageData: null, //上个页面获取的视频参数（视频id）
 				playAuth: "", //播放凭证
 				progressMarkers: [],
 				hideFlag: 'show',
 				videoId: "", //阿里云视频id
 				seekTime: '',
-				jieId: '',
-				shipinTitle: '',
+				showA: true,
+
+				pageData2: null, //上个页面获取的视频参数（视频id）
+				playAuth2: "", //播放凭证
+				progressMarkers2: [],
+				hideFlag2: 'show',
+				videoId2: "", //阿里云视频id
+				seekTime2: '',
+				showB: false,
 			}
 		},
 		components: {
-			tishiDlVue
+			tishiDlVue,videoPlayVue
 		},
 		onLoad(options) {
 			this.init(options)
 		},
 		onHide() {
 			this.hideFlag = 'hide'
+			this.hideFlag2 = 'hide'
 		},
 		onUnload() {
 			this.hideFlag = 'hide'
+			this.hideFlag2 = 'hide'
 		},
 		methods: {
 			//  当前节学习完成
@@ -139,12 +157,14 @@
 					this.saveJinduStart();
 					// 	针对视频进行赋值
 					this.videoId = this.jieInfo.video1;
-					// this.videoId = this.jieInfo.video2;
+					this.videoId2 = this.jieInfo.video2;
 					// 针对节点赋值
 					this.progressMarkers = this.jieInfo.jiedianList1;	
-					// this.progressMarkers = this.jieInfo.jiedianList2;	
+					this.progressMarkers = this.jieInfo.jiedianList2;	
 					// 执行方法
 					this.getLive(); //获取播放凭证
+					
+					this.getLive2();
 				})
 			},
 			init(options) {
@@ -165,16 +185,42 @@
 				let req = {
 					videoId: this.videoId
 				}
+				
 				getVideoAuth(req).then(res => {
 					this.playAuth = res.data
 				})
 			},
+			getLive2() {
+				if (!this.videoId2) {
+					toast("video缺失！")
+					return false
+				}
+				let req = {
+					videoId: this.videoId2
+				}
+			
+				getVideoAuth(req).then(res => {
+					this.playAuth2 = res.data
+				})
+			},
 			markersClick(data) {
+				this.showA = true;
+				this.showB = false;
+				this.$refs.c2.handleStop();
 				this.seekTime = ""
 				this.$nextTick(() => {
 					this.seekTime = data.offset
 				});
 			},
+			markersClick2(data) {
+				this.showA = false;
+				this.showB = true;
+				this.$refs.c1.handleStop()
+				this.seekTime2 = ""
+				this.$nextTick(() => {
+					this.seekTime2 = data.offset
+				});
+			},
 			goUpPage() {
 				uni.navigateBack()
 			},
@@ -184,223 +230,3 @@
 
 
 
-<script module="renderScript" lang="renderjs">
-	export default {
-		mounted() {
-			console.log("renderScript1")
-			// 在适合的生命周期，通过script和link标签引入播放器sdk、css
-			//	this.loadWebPlayerSDK()
-		},
-		data() {
-			return {
-				player: null,
-				playAuth: '',
-				videoId: '',
-				progressMarkers: [],
-				isFullScreen: false,
-				seekTime: ''
-
-			}
-		},
-		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 = ''
-					this.playAuth = newValue
-					this.loadWebPlayerSDK()
-
-				}
-			},
-			videoIdFun(newValue, oldValue, ownerInstance, instance) {
-				if (newValue) {
-					this.videoId = ''
-					this.videoId = newValue
-				}
-			},
-			hideFlagFun(newValue, oldValue, ownerInstance, instance) {
-				if (this.player) {
-					this.player.pause()
-				}
-			},
-			progressMarkersMsg(newValue, oldValue, ownerInstance, instance) {
-
-				if (newValue) {
-					this.progressMarkers = newValue
-				}
-			},
-			seekTimeFun(newValue, oldValue, ownerInstance, instance) {
-				if (newValue) {
-					this.player.play()
-					this.player.seek(newValue)
-					// 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() {
-				let that = this
-				// console.log(this.videoId);
-				// console.log(this.playAuth);
-				//配置播放器
-				if (!this.playAuth) {
-					return false;
-				}
-				var player = new Aliplayer({
-					id: "wgy-player-test",
-					"vid": this.videoId,
-					"playauth": this.playAuth,
-					extraInfo: {
-						poster: 'noposter'
-					},
-					fullscreenEvents: {
-						fullscreenChange: (isFull) => {
-							this.isFullScreen = isFull
-						}
-					},
-					//cover: 'https://img.alicdn.com/tps/TB1EXIhOFXXXXcIaXXXXXXXXXXX-760-340.jpg',
-					// "vid": '',
-					// "playauth": '',
-					// "playConfig": {
-					// 	"EncryptType": 'AliyunVoDEncryption'
-					// },
-					"skinLayout": [{
-							"name": "bigPlayButton",
-							"align": "blabs",
-							"x": 30,
-							"y": 80
-						},
-						{
-							"name": "H5Loading",
-							"align": "cc"
-						},
-						{
-							"name": "controlBar",
-							"align": "blabs",
-							"x": 0,
-							"y": 0,
-							"children": [{
-									"name": "progress",
-									"align": "blabs",
-									"x": 0,
-									"y": 44
-								},
-								{
-									"name": "playButton",
-									"align": "tl",
-									"x": 15,
-									"y": 12
-								},
-								{
-									"name": "fullScreenButton",
-									"align": "tr",
-									"x": 10,
-									"y": 12
-								},
-								{
-									"name": "timeDisplay",
-									"align": "tr",
-									"x": 10,
-									"y": 5
-								}
-							]
-						}
-					],
-					"qualitySort": "asc",
-					"format": "mp4",
-					"mediaType": "video",
-					"encryptType": 1,
-					"progressMarkers": this.progressMarkers,
-					"autoplay": false,
-					"isLive": false,
-					"rePlay": false,
-					"playsinline": true,
-					"preload": false,
-					"controlBarVisibility": "hover",
-					"useH5Prism": true
-
-				}, function(player) {});
-				this.player = player;
-				player.on('canplay', function() {
-					console.log('canplay', this.player.tag);
-					player.tag.play();
-
-				});
-
-				player.on('ended', function(data) {
-					that.exitFullScreen();
-					that.$ownerInstance.callMethod('playEnd', {
-						data: 'end'
-					})
-					// uni.$emit('playEnd', {
-					// 	data: 'end'
-					// });
-				});
-			},
-			exitFullScreen() {
-				if (document.exitFullscreen) {
-					document.exitFullscreen(); // 标准方法
-				} else if (document.mozCancelFullScreen) { // Firefox
-					document.mozCancelFullScreen();
-				} else if (document.webkitExitFullscreen) { // Chrome, Safari & Opera
-					document.webkitExitFullscreen();
-				} else if (document.msExitFullscreen) { // IE/Edge
-					document.msExitFullscreen();
-				}
-			},
-
-			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 = () => {
-						//	console.log(this.playAuth);
-						this.playAli()
-						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>

utils/common.js

@@ -143,6 +143,6 @@ export function convertTimeToSeconds(timeStr) {
     const hours = parseInt(parts[0], 10);
     const minutes = parseInt(parts[1], 10);
     // 计算总秒数：小时 × 3600 + 分钟 × 60
-    const totalSeconds = hours * 3600 + minutes * 60;
-    return totalSeconds;
+    const totalSeconds = hours * 60 + minutes;
+    return totalSeconds.toString();
 }