视频播放组件

pages/study/courseStudy.vue

@@ -9,36 +9,19 @@
 			 	<view v-if="curContent.contentType==10" style="background-color: #000000;">
 			 		<!--视频-->
 					<view style="position: relative;">
-						<video id="myVideo" 
-			 			    @touchend="doubleClickVideo"
-			 				:src="blobUrl"
-			 				controls
-			 				:enable-play-gesture="true"
-			 				:initial-time="curContent.lastStudyTime"
-			 				@play="onPlayerPlay"
-			 				@pause="onPlayerPause" 
-			 				@ended="onPlayerEnded"
-			 				@timeupdate="onPlayerPlaying"
-			 				@fullscreenchange="onFullScreen"
-			 				style="width: 100%; object-fit: fill">
-			 			</video>
-			 			<!--倍速度-->
-			 			<view id="myVideoSpeed" class="player-controls-btn cursor-pointer btn-speed">
-			 			  <view @click="showSpeedCtrl">{{videoSpeed === 1 ? '倍速' : `${videoSpeed}x`}}</view>
-			 			  <view class="speed-control" v-if="speedListShow">
-			 			    <view class="speed-control-list">
-			 					<view class="li"
-			 						v-for="item in speedList"
-			 						:key="item"
-			 						@click="changeSpeed(item)"
-			 						:data-value="item"
-			 						:class="{'current': videoSpeed === Number(item)}">
-			 						{{ item }}x
-			 					</view>
-			 			    </view>
-			 			  </view>
-			 			</view>
-			 			<view class="player-box" v-if="playerBoxShow">
+						<video-player
+							url="/static/temp/test.mp4"
+							controls
+							:enable-play-gesture="true"
+							:inittime="curContent.lastStudyTime"
+							@play="onPlayerPlay"
+							@pause="onPlayerPause" 
+							@ended="onPlayerEnded"
+							@timeupdate="onPlayerPlaying"
+							@fullscreenchange="onFullScreen"
+							style="width: 100%; object-fit: fill">
+						></video-player>
+						<view class="player-box" v-if="playerBoxShow">
 			 				  <view class="player-praise">
 			 					<view @click="praiseContent" style="cursor: pointer;">
 			 					  <image class="icon-small" v-if="isPraise" src="/static/images/icon/praise-active.png" />
@@ -1335,41 +1318,7 @@
 			},
 			onFullScreen(e){
 				//console.log(e,'e');
-				let full=e.detail.fullScreen;
-				let divId='videowatermark';
-				setTimeout(() => {
-					var div = document.getElementById('myVideo')
-					var div1 = div.firstChild;
-					var speedDiv=div1.querySelector("#myVideoSpeed");
-					if(full){
-						var div3 = document.createElement("div");
-					    div3.id =divId;
-					    div3.setAttribute("class", "fullmark");
-						div3.innerHTML='';
-					    // 从父组件传过来的水印内容
-					    //div3.innerText =this.userInfo.name+this.userInfo.code;
-						for(var i=0;i<4;i++){
-							div3.innerHTML+='<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">'+this.userInfo.name+this.userInfo.code+'</div>';
-						}
-						
-					    div3.style.cssText = "position:absolute;pointer-events: none; width: 100%;height: 100%;top:0;left:0;bottom: 0;right: 0; display: flex;justify-content: center;flex-wrap: wrap;overflow: hidden; opacity:0.3;padding-top:10px";
-					    //console.log(div3,'div3');
-						div1.appendChild(div3);
-						if(!speedDiv){
-							var speedDiv=document.getElementById('myVideoSpeed');
-							div1.appendChild(speedDiv)
-						}
-					}else{
-						var markDiv=div1.querySelector("#"+divId);
-						//var speedDiv=div1.querySelector("#myVideoSpeed");
-						if(markDiv){
-							div1.removeChild(markDiv);
-						}
-						if(speedDiv){
-							//div1.removeChild(speedDiv);
-						}
-					}
-				 }, 200);
+				
 			},
 			onPlayerPlay(){
 				this.isPlaying = true;

pages/study/videoTest.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<view>
+		<view v-if="show">
 			<video-player 
 				:url="fileUrl" 
 				:name="title" 
@@ -8,14 +8,22 @@
 				:drag="true"
 				@play="videoPlay"
 				@pause="videoPause"
-				@playing="videoPlaying"
+				@timeupdate="videoPlaying"
 				@ended="videoEnd"
 				@fullscreenchange="videoScreen">
 			</video-player>
 		</view>
-		<!-- <view style="padding-top: 30px;display: flex;justify-content: center;">
-			<button type="primary" @click="changeSrc">切换测试</button>
-		</view> -->
+		<view style="padding-top: 30px;display: flex;justify-content: center;">
+			<button type="default" @click="loadVideo()">加载</button>
+			<button type="primary" @click="changeSrc()">切换测试</button>
+		</view>
+		<view>
+			<video style="width: 100%;"
+				:src="fileUrl"
+				:controls="true"
+				@fullscreenchange="videoScreen"
+			></video>
+		</view>
 	</view>
 </template>
 
@@ -23,25 +31,28 @@
 	export default{
 		data(){
 			return {
-				fileUrl:'/static/temp/test.mp4',
-				initTime:20,
-				title:'测试播放',
+				show:false,
+				fileUrl:'',
+				initTime:0,
+				title:'',
 				author:'',
 			}
 		},
 		mounted() {
-			//this.startAudioPlay();
+			this.loadVideo();
 		},
 		methods:{
-			startAudioPlay(){
-				this.fileUrl='http://localhost:9090/cdn/upload/course/2022/5/979321410778959872.mp3';
+			loadVideo(){
+				//this.fileUrl='http://localhost:9090/cdn/upload/course/2022/5/979321410778959872.mp3';
+				this.fileUrl='/static/temp/test.mp4';
 				this.title='标题内容111';
-				this.author='作者信息';
+				this.initTime=40;
+				this.show=true;
 			},
 			changeSrc(){
-				this.fileUrl='http://localhost:9090/cdn/upload/course/2022/4/964853684964700160.mp3';
-				this.title='标题内容22';
-				this.author='作者信息';
+				this.fileUrl='/static/temp/video.mp4';
+				this.title='标题内容221';
+				this.initTime=20
 			},
 			videoPlay(){
 				console.log('videoPlay');