小程序 uni-app video 自定义控制条

本来不想自定义video的控制条的，感觉不同机型，不同操作系统会有bug，肯定不如自带的好，不过，因为iPhone11或是iPhoneX下面的横线，导致，一想拖动进度条，就切换屏幕，video自带的控制条还不能控制在屏幕的位置。没办法，小白也得上手了。

先放两张真机截图：

      

<video
	@pause="pause"
	@play="contrPlay"
	v-if="reFresh"
	class="video-class"
	:src="recordUrl"
	style="width: 100%;height: 100%;"
	id="videoPlay"
	:object-fit="objectFit"
	:loop="true"
	:autoplay="true"
	@timeupdate='videoUpdate'
	@ended="videoEnded"
	:controls="bool"
>
<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>
 <!-- <view class='video_back'><image :src="fullScreenFlag ? '../../static/img/videoBack.png' : ''" @click='video_back'></image></view> -->
</video><!-- contain -->

data() {
		return {
			fullScreenFlag: false,
			currtime:'00:00:00',//当前播放时间 字符串 计算后
			druationTime:'00:00:00',//总时间 字符串 计算后
			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;
		},
		// 根据秒获取时间
		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;
		},
}

 .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;
}

参考：https://www.jb51.net/article/148266.htm

https://blog.csdn.net/qq_38194393/article/details/88655021?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160248681319724836722929%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=160248681319724836722929&biz_id