learning-system-mobile/components/video-player/video-player.vue

<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>
			<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>
</template>

<script>
	export default {
		props: {
			url:{
				type: String,
				require: true
			},
			initTime:{//默认播放的位置,第几秒
				type: Number, 
				default: 0
			},
		},
		data() {
			return {
				fullScreenFlag: false,
				currtime:'00:00:00',//当前播放时间 字符串 计算后
				druationTime:'00:00:00',//总时间 字符串 计算后
				videoPlayingTime:0,
				bool:false,
				sliderValue: 0, //控制进度条slider的值，
				updateState: false, //防止视频播放过程中导致的拖拽失效
				palyFlag:false,
			};
		},
		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) { 
				    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,'播放错误');
				},
				// 根据秒获取时间
				formatSeconds(a) {
					var hh = parseInt(a/3600);  
					var mm = parseInt((a-hh*3600)/60);  
					if(mm<10) mm = "0" + mm;  
					var ss = parseInt((a-hh*3600)%60);  
					if(ss<10) ss = "0" + ss;  
					if(hh<10) hh = hh == 0?'':`0${hh}:`;  
					var length = hh  + mm + ":" + ss;  
					if(a>=0){  
						return length;  
					}else{  
						return "00:00";  
					}  
				},
				//开始+暂停
				videoOpreation() { 
				    this.palyFlag ? this.videoContext.play() : this.videoContext.pause();
				    this.palyFlag= !this.palyFlag;
				  },
				// 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
				videoUpdate(e) {
					let duration=this.live.liveRoomRecordList[0].duration;
					let sliderValue = e.detail.currentTime / duration * 100;
					let second=sliderValue / 100 * duration;
					if (this.updateState) { //判断拖拽完成后才触发更新，避免拖拽失效
						this.sliderValue=sliderValue;
					}else{
						
					}
					 this.druationTime = this.formatSeconds(duration);
					 this.currtime = this.formatSeconds(second);
				},
		        //拖动过程中触发的事件
		        sliderChanging(e) {
					//拖拽过程中，不允许更新进度条
					this.updateState= false;
				},
				// 拖动slider完成后触发
				sliderChange(e) {
					var duration=this.live.liveRoomRecordList[0].duration;
					var second=e.detail.value / 100 * duration;
					if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
					   this.videoContext.seek(second);
					   this.sliderValue= e.detail.value,
					   this.updateState= true //完成拖动后允许更新滚动条
					   this.druationTime = this.formatSeconds(duration);
					   this.currtime = this.formatSeconds(second);
					} 
					else { }
				},
				// 开始
				contrPlay(){
					this.videoContext.play();
					this.palyFlag=false;
				},
				// 暂停
				pause() {
					this.videoContext.pause(); //站厅播放
					this.palyFlag=true;
				},
				stop(){
					this.videoContext.stop(); //
				}
		}
	}
</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);
	}
	.process-container image{
	  display:inline-block;
	  flex:1;
	  max-width:50rpx;
	  max-height:50rpx;
	  text-align:center;
	}
	.slider-container{
	  z-index:13;
	  height:60rpx;
	  margin-bottom:10rpx;
	  flex:6;
	  max-width:58%;
	}
	.video-controls-play{
		width: 8%;
	}
	.currtime{
		color: #ffffff;
		font-size: 22rpx;
		width: 11%;
		height: 100%;
		line-height: 60rpx;
		text-align: center;
	}
	.druationTime{
		color: #ffffff;
		font-size: 22rpx;
		width: 12%;
		height: 100%;
		line-height: 60rpx;
		text-align: center;
	}
	.video_back{
	  display:block;
	  width:60rpx;
	  height:60rpx;
	  left:5rpx;
	  top:15rpx;
	  position:absolute;
	  text-align:center;
	  z-index:19;
	}
	.video_back image{
	  width:44rpx;
	  height:44rpx;
	}
</style>