uniapp视频取消控件展示，使用slider自定义视频进度条

思路：video标签 :controls="false"，不展示自带的控件，

通过uni.createVideoContext('myVideo')获取video对象，视频初始化结束的时候@endLoading获取到视频的时长endTime， 视频帧刷新的时候@timeupdate获取当前视频播放的时长startTime。

slider标签进行数据展示

代码：需要自己添加图片和视频地址

<template>
<view class="">
    <!-- 视频铺满盒子 -->
<view class="video_parent">
    <video class="videoClass"  @click="videoControlFun"
    @timeupdate="timeupdate($event)" @loadeddata="startLoading($event)" 
    @loadedmetadata="endLoading($event)"  ref="myVideo" id="myVideo"
    @ended="closeVideo" src="XXXXX.mp4" @pause="videoState=false" :show-mute-btn="false"
    object-fit="contain"  @play="videoState=true" :autoplay="showVideo"
     enable-play-gesture="true" :controls="false"></video>
</view>

<!-- 视频进度条 竖屏-->
<view v-show="!showVideoList&&getFull==false" class="control_box"
    style=" ">
    <view class="control_icon" @click="videoControlFun"
        style="">
        <img v-show="videoState" src="xxx/control_play.png" alt="">
        <img v-show="!videoState" src="xxx/control_pause.png" alt="">
    </view>
    <slider style="margin:0.3rem 1.6rem 0 3.4rem;" :value="videoPrecent" @change="sliderChange" min="0"
        max="100" activeColor=" #4AE3B4" backgroundColor="#d0d0d0" block-color="#fff" block-size="12" />
    <view class="time"
        style="">
        {{startTime}}
    </view>
    <view class="time"
        style="right: 1.6rem;left: unset;">
        {{endTime}}
    </view>
</view>
</view>
</template>
<script>
    export default {
        data() {
            return {
             
                startTime: '00:00',
                endTime: "", //视频时长
                // videoControl: false, //播放
                videoPrecent: 0, //播放进度
                videoDuring: 0, //时长
               
            }
        },
        onLoad() {

        },
        onShow() {

        },
        mounted() {
            this.videoObj = uni.createVideoContext('myVideo')
        },
  
        methods: {
            // 视频播放控制
            videoControlFun() {
          
                this.videoState = !this.videoState
                if (this.videoState) {
                    this.videoObj.play()
                } else {
                    this.videoObj.pause()
                }
            },
            //进度条拖动
            sliderChange(e) {
                // console.log('value 发生变化：' + e.detail.value,(this.videoPrecent/100)*this.videoDuring)
                this.videoPrecent = e.detail.value
                this.videoObj.seek((this.videoPrecent / 100) * this.videoDuring)
                this.$forceUpdate()
            },
            swiperChange(e) {
                // console.log(e.detail.current)
                this.currentIndex = e.detail.current + 1
            },
          
            videoErrorCallback: function(e) {
                uni.showModal({
                    content: e.target.errMsg,
                    showCancel: false
                })
            },
            // 播放结束
            closeVideo() {

                this.videoObj.pause()
            },
            timeupdate(e) { //视频刷新帧
                this.videoPrecent = (e.detail.currentTime / e.detail.duration).toFixed(2) * 100
                this.startTime = this.handleTime(e.detail.currentTime)
            },
            // 开始加载
            startLoading(e) {
                uni.showLoading({
                    title: '加载中...'
                })
            },
            endLoading(e) {
                console.log(e)
                let t = e.detail.duration
                this.videoDuring = Number(t.toFixed(0))
                this.endTime = this.handleTime(t)
                uni.hideLoading()
            },
            // 视频时间转换
            handleTime(t) {
                let s = ''
                if (t < 3600 && t > 60) {
                    s = t / 60 + Number(t % 60).toFixed(0)
                } else if (t >= 10) {
                    s = "00:" + Number(t.toFixed(0))
                } else {
                    s = "00:0" + Number(t.toFixed(0))
                }
                return s
            },
        }
    }
</script>


<style>
/*放app.vue内每个页面公共css 1rem=10px*/
html {
    font-size: calc(100vw / 37.5);
}
.video_parent{
    width: 100vw;
    height: 100vh;
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    z-index: 1;
         
}
.videoClass {
    width: 100vw;position: absolute;
    right: 0;
    height: 100vh;
}
.control_box{
    z-index: 1;
    position: absolute;
    bottom: 4rem;
    width: 100vw;
    height: 2.4rem;
    padding-left: .8rem;
    box-sizing: border-box;
    
}

.control_box .control_icon{
    width: 2.4rem;
    height: 2.4rem;    
    position: absolute;
}
.control_box .time{
    font-size: 1.3rem;
    color:#fff;
    line-height: 1.5rem;
    position: absolute;
    left: 3.9rem;
}
</style>

图片资源：control_play.png/control_pause.png

效果图：