视频组件

components/video-player/video-player.vue

@@ -1,29 +1,58 @@
 <template>
-	<video id="myVideo" style="width: 100%;"
-		:src="url"
-		@error="videoErrorCallback" 
-		:initial-time="videoPlayingTime"
-		@play="onPlayerPlay"
-		@pause="onPlayerPause"
-		@ended="onPlayerEnded"
-		@timeupdate="onPlayerPlaying"
-		@fullscreenchange="onFullScreen"
-		controls>
-		<view class='process-container'>
-			<view class="video-controls-play">
-				<image :src="palyFlag ? '../../static/img/start.png' : '../../static/img/pause.png'" class='video-controls-icon' @click='videoOpreation'/>
+	<view class="video-box" @click="clickVideo" @dblclick="dbclickVideo">
+		<video id="myVideo" style="width: 100%;"
+			:src="url"
+			:controls="false"
+			@error="videoErrorCallback" 
+			:initial-time="videoPlayingTime"
+			@play="onPlayerPlay"
+			@pause="onPlayerPause"
+			@ended="onPlayerEnded"
+			@timeupdate="onPlayerPlaying"
+			@fullscreenchange="onFullScreen"
+			@loadeddata="onPalyerLoad"
+			@loadedmetadata="onPlayerMetaLoad"
+			@controlstoggle="onPlayerControlsToggle"
+			@dblclick="dbclickVideo"
+		>
+		</video>
+		<view v-if="contrlShow">
+			<view class="process-container">
+				<view class="controller-play">
+					<image :src="require(playing? './images/pause.png':'./images/play.png')"  @click='videoOpreation'/>
+				</view>
+				<view class="currtime">{{currtime}}</view>
+				<view class='slider-container'>
+					<slider @change="sliderChange" @changing="sliderChanging" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="12"/>
+				</view>
+				<view class="druationTime">{{druationTime}}</view>
+				<view class="druationTime">
+					<view id="myVideoSpeed" class="player-speed 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>
+				<view class="controller-screen">
+					<image :src="require(fullScreenFlag? './images/back.png':'./images/full.png')"  @click='fullScreen'/>
+				</view>
 			</view>
-			<view class="currtime">{{currtime}}</view>
-		    <view class='slider-container'>
-		        <slider @change="sliderChange" @changing="sliderChanging" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="16rpx"/>
-		    </view>
-			<view class="druationTime">{{druationTime}}</view>
-			<image :src="fullScreenFlag ? '../../static/img/videoBack.png' : '../../static/img/fullScreen.png'" class='video-controls-icon' @click='videoAllscreen'></image>
 		</view>
-	</video>
+	</view>
 </template>
-
 <script>
+	import {mapGetters} from 'vuex'
+	import studyUtil from '@/utils/study.js';
 	export default {
 		props: {
 			url:{
@@ -37,28 +66,48 @@
 		},
 		data() {
 			return {
-				fullScreenFlag: false,
-				currtime:'00:00:00',//当前播放时间 字符串 计算后
-				druationTime:'00:00:00',//总时间 字符串 计算后
-				videoPlayingTime:0,
-				bool:false,
+				contrlShow:true,//是否显示进度条
+				contrlShowTimeout:null,//显示控制条句柄
+				videoContext:null,//播放器
+				fullScreenFlag: false,//是否全屏
+				currtime:'00:00',//当前播放时间 字符串 计算后
+				druationTime:'00:00',//总时间 字符串 计算后
+				videoPlayingTime:0,//指定播放的时间位置
 				sliderValue: 0, //控制进度条slider的值，
 				updateState: false, //防止视频播放过程中导致的拖拽失效
-				palyFlag:false,
+				playing:false,//是否在播放中
+				curVideo:{
+					duration:0
+				},
+				speedListShow:false,
+				speedList:["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"],
+				videoSpeed: 1.0, // 当前倍速:
 			};
 		},
+		computed: {
+			...mapGetters(['userInfo']),
+		},
+		created() {
+			
+		},
+		mounted() {
+			this.videoContext=uni.createVideoContext("myVideo", this);
+		
+		},
 		methods: {
-				// video_back: function (e) {
-				//     this.fullScreenFlag ? this.videoContext.requestFullScreen() : this.videoContext.exitFullScreen();
-				//     // this.fullScreenFlag ? this.bool=false : this.bool=true;
-				//     this.fullScreenFlag= !this.fullScreenFlag;
-				//  },
+				
 				// 全屏+退出全屏
-				videoAllscreen(e) { 
+				fullScreen(){
+					this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
+					// this.fullScreenFlag ? this.bool=true : this.bool=false;
+					this.fullScreenFlag=!this.fullScreenFlag;
+				},
+				onFullScreen(e) { 
 				    this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
 					// this.fullScreenFlag ? this.bool=true : this.bool=false;
 					this.fullScreenFlag=!this.fullScreenFlag;
 				},
+				
 				videoErrorCallback(e){
 					console.log(e,'播放错误');
 				},
@@ -77,14 +126,29 @@
 						return "00:00";  
 					}  
 				},
+				changeSpeed(e) {
+				  // 获取选择的倍速
+				  let value = e;
+				  this.videoSpeed = Number(value);
+				  this.videoContext.playbackRate(this.videoSpeed);
+				  studyUtil.setVideoSpeed(this.videoSpeed);
+				  this.speedListShow=false;
+				},
+				showSpeedCtrl(){
+					if(this.speedListShow){
+						this.speedListShow=false;
+					}else{
+						this.speedListShow=true;
+					}
+				},
 				//开始+暂停
 				videoOpreation() { 
-				    this.palyFlag ? this.videoContext.play() : this.videoContext.pause();
-				    this.palyFlag= !this.palyFlag;
+				    this.playing ? this.videoContext.pause() : this.videoContext.play();
+				    this.playing= !this.playing;
 				  },
 				// 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
 				videoUpdate(e) {
-					let duration=this.live.liveRoomRecordList[0].duration;
+					let duration=this.curVideo.duration;
 					let sliderValue = e.detail.currentTime / duration * 100;
 					let second=sliderValue / 100 * duration;
 					if (this.updateState) { //判断拖拽完成后才触发更新，避免拖拽失效
@@ -92,8 +156,9 @@
 					}else{
 						
 					}
-					 this.druationTime = this.formatSeconds(duration);
-					 this.currtime = this.formatSeconds(second);
+					this.druationTime = this.formatSeconds(duration);
+					//console.log(this.druationTime,'this.druationTime');
+					this.currtime = this.formatSeconds(second);
 				},
 		        //拖动过程中触发的事件
 		        sliderChanging(e) {
@@ -102,7 +167,7 @@
 				},
 				// 拖动slider完成后触发
 				sliderChange(e) {
-					var duration=this.live.liveRoomRecordList[0].duration;
+					var duration=this.curVideo.duration;
 					var second=e.detail.value / 100 * duration;
 					if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
 					   this.videoContext.seek(second);
@@ -113,54 +178,93 @@
 					} 
 					else { }
 				},
+				clickVideo(){
+					// if(this.contrlShowTimeout!=null){
+					// 	window.clearTimeout(this.contrlShowTimeout);
+					// }
+					// this.contrlShow=!this.contrlShow;
+				},
+				dblclickVideo(){
+					console.log("双击了");
+				},
+				onPlayerLoad(e){
+					this.contrlShow=false;
+				},
+				onPlayerMetaLoad(e){
+					this.curVideo.duration=Number(e.detail.duration);
+					this.druationTime = this.formatSeconds(this.curVideo.duration);
+				},
+				onPlayerControlsToggle(e){
+					console.log(e,"ControlsToggle");
+				},
 				// 开始
-				contrPlay(){
+				onPlayerPlay(){
 					this.videoContext.play();
-					this.palyFlag=false;
+					this.playing=true;
+					this.contrlShow=true;
+				},
+				onPlayerPlaying(e){
+					this.playing=true;
+					this.updateState=true;
+					this.videoUpdate(e);
+					// let $this=this;
+					// if(this.contrlShow){
+					// 	this.contrlShowTimeout=window.setTimeout(function(){
+					// 		$this.contrlShow=false;
+					// 	},5000);
+					// }
 				},
 				// 暂停
-				pause() {
+				onPlayerPause() {
 					this.videoContext.pause(); //站厅播放
-					this.palyFlag=true;
+					this.playing=false;
 				},
-				stop(){
-					this.videoContext.stop(); //
+				onPlayerEnded(){
+					this.playing=false;
 				}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	 .process-container{
-	  width:100%;
-	  padding:1% 2% 1% 2%;
-	  height:60rpx;
-	  max-height:60rpx;
-	  position:absolute;
-	  bottom:40rpx;
-	  left:0;
-	  right:0;
-	  z-index:13;
-	  display:flex;
-	  align-items: center;
-	  background:rgba(59, 57, 57, 0.2);
+	.video-box{
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+	.process-container{
+		width:100%;
+		padding:1% 2% 1% 2%;
+		height:60rpx;
+		max-height:60rpx;
+		position:absolute;
+		bottom:0rpx;
+		color:#ffffff;
+		left:0;
+		right:0;
+		z-index:99;
+		display:flex;
+		align-items: center;
+		background:rgba(59, 57, 57, 0.2);
 	}
 	.process-container image{
-	  display:inline-block;
-	  flex:1;
-	  max-width:50rpx;
-	  max-height:50rpx;
-	  text-align:center;
+		display:inline-block;
+		max-width:30rpx;
+		max-height:30rpx;
+		text-align:center;
 	}
 	.slider-container{
 	  z-index:13;
 	  height:60rpx;
 	  margin-bottom:10rpx;
 	  flex:6;
-	  max-width:58%;
+	  max-width:40%;
 	}
-	.video-controls-play{
-		width: 8%;
+	.controller-play{
+		width: 12%;
+	}
+	.controller-screen{
+		
 	}
 	.currtime{
 		color: #ffffff;
@@ -192,4 +296,46 @@
 	  width:44rpx;
 	  height:44rpx;
 	}
+	
+	.player-speed{
+		position: relative;
+		color: #e5e5e5;
+		padding: 0 0.4rem;
+		transition: color 0.3s;
+		height: 22px;
+	}
+	.btn-speed:hover .speed-control {
+	  // visibility: visible;
+	}
+	.speed-control {
+	  position: absolute;
+	  //top: 180px;
+	  transition: visibility 0.3s;
+	  transform: translate(-50%, -100%);
+	}
+	.speed-control .speed-control-list {
+	  list-style: none;
+	  color: #e5e5e5;
+	  width: 50px;
+	  font-size: 12px;
+	  text-align: left;
+	  padding: 0px 0px 0px 5px;
+	  margin: 0;
+	  overflow: hidden;
+	  border-radius: 4px;
+	  background: rgba(21, 21, 21, 0.8);
+	}
+	.speed-control .speed-control-list .li {
+	  position: relative;
+	  display: block;
+	  height: 25px;
+	  line-height: 25px;
+	}
+	.speed-control .speed-control-list .li:hover {
+	  color: #fff;
+	  background: rgba(99, 99, 99, 0.8);
+	}
+	.speed-control .speed-control-list .li.current {
+	  color: var(--primaryColor);
+	}
 </style>

pages/study/videoTest.vue

@@ -21,7 +21,7 @@
 	export default{
 		data(){
 			return {
-				fileUrl:'http:/127.0.0.1:9090/cdn/upload/course/2022/8/1013883711839379456.mp4',
+				fileUrl:'/static/temp/test.mp4',
 				title:'测试播放',
 				author:'',
 			}
@@ -41,16 +41,16 @@
 				this.author='作者信息';
 			},
 			videoPlay(){
-				console.log('audioPlay');
+				console.log('videoPlay');
 			},
 			videoEnd(){
-				console.log('audioEnd');
+				console.log('videoEnd');
 			},
 			videoPause(){
-				console.log('audioPause');
+				console.log('videoPause');
 			},
 			videoPlaying(){
-				console.log('audioPlaying');
+				console.log('videoPlaying');
 			}
 		}
 	}