播放器

pages/component/commonComponents/curriculumVideo.vue

@@ -1,7 +1,6 @@
 <template>
   <view class="richDetail">
     <!-- 公共组件-每个页面必须引入 -->
-
     <view
       scroll-x="true"
       class="detail_title video_box"
@@ -28,7 +27,7 @@
 import $http from "@/config/requestConfig.js";
 import { mapState } from "vuex";
 export default {
-  props: ["detailInfo", "dataList", "currentVideo"],
+  props: ["detailInfo", "dataList", "currentVideo", "changeVideoLock"],
   components: {},
   data() {
     return {};
@@ -50,6 +49,9 @@ export default {
       }
     },
     handleClick(data) {
+		if(this.changeVideoLock){
+			return
+		}
       console.log("data at line 35:", data);
       this.$emit("open", data);
     },

pages/component/commonComponents/video/index.vue

@@ -52,6 +52,9 @@
 			<div @tap="renderScript.emitReplayVideoFlagFalse" ref="videoContent8" v-show="false" class="videoContent8">
 				隐藏播放下一条界面
 			</div>
+			<div @tap="renderScript.emitUnlockChangeVideo" ref="videoContent9" v-show="false" class="videoContent9">
+				释放切换键锁
+			</div>
 			<div class="fullScreenButton-container">
 				<div :class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
 					@tap="renderScript.changeVideoScreen"></div>
@@ -151,6 +154,9 @@
 				console.log('复原replayVideoFlag',this.replayVideoFlag);
 				this.replayVideoFlag = false
 			},
+			UnlockChangeVideo(){
+				this.$emit('unlockChangeVideo')
+			},
 			hideNextVideo(){
 				this.showCountDown = false
 				this.playEndBlank = false
@@ -439,13 +445,12 @@
 </script>
 
 <script module="renderScript" lang="renderjs">
-	var GolbalPlayerOptions = {}
 	var videoData = null
 	var _seconds = 0
 	var ReplayVideoFlag = false
 	var curStatus = null
 	var diff = 0
-	var myplayer = undefined
+	var myplayer = undefined	
 	import $ from 'jquery'
 	export default {
 		components: {
@@ -455,7 +460,6 @@
 			// 在适合的生命周期，通过script和link标签引入播放器sdk、css
 			console.log(this.options, '这是monted')
 			this.loadWebPlayerSDK()
-			this.loadComponent()
 		},
 		data() {
 			return {
@@ -503,6 +507,9 @@
 			emitReplayVideoFlagFalse(event, ownerInstance) {
 					ownerInstance.callMethod('replayVideoFlagFalse')
 			},
+			emitUnlockChangeVideo(event, ownerInstance) {
+					ownerInstance.callMethod('UnlockChangeVideo')
+			},
 			async receiveFirstTime(newValue, oldValue, ownerVm, vm) {
 
 			},
@@ -568,11 +575,16 @@
 			},
 			// renderjs阿里云播放器引入与配置
 			getLive() {
-				// console.log('这是这只只是666666:', this.firstTime, this.videoData)
-				if (myplayer) {
+				 console.log('这是这只只是666666:', this.firstTime, this.videoData)
+				if (this.player) {
+					this.player.pause();
+					myplayer.pause()
 					this.player.dispose();
 					$('#url-player-test').empty();
 					this.player = null;
+					myplayer = null
+			
+					console.log('上一条视频的状态，',this.player.getStatus());
 				}
 				var fullScreenButtonComponent = Aliplayer.Component({
 					/**
@@ -697,7 +709,7 @@
 									align: "blabs",
 									x: 0,
 									y: 44
-								},								
+								},
 								{
 									name: "playButton",
 									align: "tl",
@@ -716,7 +728,6 @@
 									x: 15,
 									y: 12
 								},
-								// {name: "fullScreenButton", align: "tr", x: 10, y: 12},
 								{
 									name: "volume",
 									align: "tr",
@@ -764,17 +775,17 @@
 					}
 					console.log('这是没有加密的视频');
 				}
-				// GolbalPlayerOptions = playerOptions
+
 				var player = new Aliplayer(playerOptions, function(player) {});
 				this.player = player;
 				myplayer = player;
-				
-				console.log('myplayer------------',JSON.stringify(myplayer));
+				// console.log('myplayer------------',myplayer.loadByUrl('https://www.w3schools.com/html/movie.mp4'));
 				console.log('是否拿到第一次初始值呢', this.platform, typeof this.firstTime, this.firstTime)
 
 				player.on('ready', function() {
 					console.log('播放器准备就绪，开始播放');
 					player.play()
+					$('.videoContent9').click()
 				})
 				player.on('play', function() {
 					console.log('开始播放------');
@@ -823,7 +834,10 @@
 					$('.videoContent2').click()
 					$('.videoContent6').click()
 				})
-
+				this.player.on('pause', function() {
+					console.log('触发暂停')					
+					this.player.pause(true)
+				})
 				this.player.on('error', function() {
 					console.log('播放出错')
 					$('.videoContent5').click()
@@ -880,10 +894,10 @@
 			},
 			// 监听视频参数变化，并赋值给常量
 			receiveMsg(newValue, oldValue, ownerVm, vm) {
-				
 				//数据变化	
 				videoData = newValue
 				if (videoData) {
+					return 
 					console.log('切换后的播放数据videoData',videoData.type);
 					if (videoData.type == 1) {
 						if (videoData.m3u8Url != '' && videoData.m3u8Url != null) {
@@ -947,25 +961,12 @@
 					document.body.appendChild(l_tag);
 				});
 			},
-			loadComponent() {
-							return new Promise((resolve, reject) => {
-							    const s_tag = document.createElement('script');
-							    s_tag.type = 'text/javascript';
-							    // 需要先下载组件 js 文件，放到项目 /static/ 目录下
-							    // 下载地址：https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.js
-							    s_tag.src = '@/static/aliplayercomponents-1.0.9.min.js';
-							    s_tag.charset = 'utf-8';
-							    s_tag.onload = () => {
-							        resolve();
-							    }
-							    document.body.appendChild(s_tag);
-							});
-						}
+
 		}
 	}
 </script>
 <style>
-	.cancelNext{display: inline-block; 
+	.cancelNext{display: inline-block; margin-right: 20rpx; 
 	border-radius: 10rpx; margin-top: 10rpx; 
 	padding: 10rpx 20rpx !important; background-color: #fff !important;
 	color: #000; text-align: center; line-height: 50rpx;}
@@ -973,7 +974,7 @@
 	.nextText{}
 	.showCountDownd { 
 	box-sizing: border-box;
-		height: 100%; width: 90%;  background-color: rgba(0, 0, 0, 0.6); 
+		height: 100%; width: 100%;  background-color: rgba(0, 0, 0, 0.6); 
 		
 		display: flex;
 		align-items: center;

pages/course/chapterDetailAndorid.vue

@@ -18,6 +18,7 @@
             @changeScreenLoading="changeScreenLoading"
 			@hideNextVideo="hideNextVideo"
 			@startNextVideoCountDown = "startNextVideoCountDown"
+			@unlockChangeVideo="unlockChangeVideo"
             v-if="isfresh"
             ref="commonVideo"
 			:secondCountDown="secondCountDown"
@@ -55,6 +56,7 @@
               :currentVideo="currentVideo"
               :dataList="videoArray"
               @open="changeVideo"
+			  :changeVideoLock="changeVideoLock"
             >
             </common-curriculum-video>
           </view>
@@ -117,6 +119,7 @@ export default {
   },
   data() {
     return {
+		changeVideoLock:false, // 切换键锁
       isFullScreen: false,
       screenLoading: false,
       isfresh: false,
@@ -228,6 +231,9 @@ export default {
     ...mapState(["userInfo"]),
   },
   methods: {
+	  unlockChangeVideo(){
+		  this.changeVideoLock = false
+	  },
 	  startNextVideoCountDown(){
 		  this.secondCountDown = 10
 		  let that = this
@@ -288,6 +294,7 @@ export default {
       this.$forceUpdate();
     },
     initVideo() {
+		this.changeVideoLock = true
       this.screenLoading = false;
       this.isfresh = false;
       this.$nextTick(() => {
@@ -301,6 +308,7 @@ export default {
       });
     },
     changeVideo(data) {
+		this.changeVideoLock = true
 		if(this.countDownTimer){
 			this.hideNextVideo()
 		}
@@ -315,10 +323,9 @@ export default {
         // this.$refs.commonVideo.handleEnd();
         setTimeout(() => {
           
-		  this.$refs.commonVideo.changeVideo(data);
-		  this.currentVideo = data;
-		   // this.changeVideo()
-          // this.initVideo();
+		  // this.$refs.commonVideo.changeVideo(data);
+		  this.currentVideo = data;		 
+          this.initVideo();
           this.isOpenMp3 = false;
         }, 500);
       }