uni-app video组件进度条问题

开发环境	版本号	项目创建方式
Windows	win11	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

手机系统：Android

手机系统版本号：Android 9.0

手机厂商：雷电模拟器

手机机型：安卓

页面类型：vue

vue版本：vue2

打包方式：云端

示例代码：

<template>
<view class="">  
    <video class="video"   
    id="video"  
    :src="src"  
    :loop="false"  
    :controls="true"  
    objectFit="contain"  
    :http-cache="true"  
    :autoplay='false'  
    :enable-progress-gesture='false'  
    :show-center-play-btn="false"  
    :show-play-btn="false"  
    :show-fullscreen-btn="false"  
    :show-progress="false"  
    [@progress](/user/progress)='progress'  
    ></video>  
    <text class="" style="font-size: 30rpx;color: #f00;padding: 30rpx;text-align: center;padding-top: 100rpx;">请先播放视频，再跳转页面</text>  

    <view class="btn" @tap='play'><text style="color: #fff;">播放视频</text></view>  
    <view class="btn" @tap='pause'><text style="color: #fff;">暂停视频</text></view>  

    <view class="btn" @tap='a' style="background-color: #f00;margin-top: 100rpx;"><text style="color: #fff;font-size: 40rpx;">跳转页面</text></view>  

</view>  
</template>  

<script>
export default {
data() {
return {
src:'http://qiniu.v.xtiao123.com/qiniu___e5d465ac09e49d8fd13e0397ef9885c2'
}
},
onReady() {
// this.play()
},
onLoad() {

},
methods: {
    a(){
        this.pause(); // 暂停视频  
        uni.switchTab ({  
            url:'/pages/index/a'  
        })  
    },
    play(){
        this.getVideoContext()?.play();
    },
    pause(){
        this.getVideoContext()?.pause();
    },

    // 创建并返回 video 上下文 videoContext 对象  
    getVideoContext() {
        return uni.createVideoContext('video');
    },
    // 视频播放进度条  
    progress(e:UniVideoProgressEvent){
        console.log(e.detail.buffered)
    },
}
}
</script>  

<style>
.video{
width: 100%;
}
.btn{
    background-color: #000;
    color: #fff;
    font-size: 50rpx;
    padding: 30rpx;
    text-align: center;
    align-items:center;
    justify-content: center;
    margin: 50rpx;
    margin-top: 0;
}
</style>

操作步骤：

预期结果：

实际结果：

bug描述：

@progress返回进度条不对，在雷电模拟器
loop设置=true 循环播放，@progress只返回一次，循环播放后没有再次返回@progress

itying888 1楼•2 个月前作者

在处理uni-app中video组件的进度条问题时，你可以通过监听video组件的相关事件并结合组件的属性来实现自定义进度条的功能。以下是一个简单的代码示例，展示了如何创建一个自定义的视频进度条。

首先，确保你已经在页面中引入了video组件：

<template>
  <view class="container">
    <video
      id="myVideo"
      src="your-video-url.mp4"
      controls
      @timeupdate="onTimeUpdate"
      @loadedmetadata="onLoadedMetadata"
    ></video>
    <view class="progress-bar">
      <view
        class="progress-filled"
        :style="{ width: progress + '%' }"
        @touchstart="startDrag"
        @touchmove="onDragging"
        @touchend="endDrag"
      ></view>
    </view>
    <view class="time-display">
      {{ currentTime }} / {{ duration }}
    </view>
  </view>
</template>

接下来，在页面的script部分，添加对应的事件处理逻辑和数据绑定：

<script>
export default {
  data() {
    return {
      currentTime: 0,
      duration: 0,
      progress: 0,
      dragging: false,
      startTime: 0,
      startX: 0,
    };
  },
  methods: {
    onTimeUpdate(event) {
      this.currentTime = event.detail.currentTime;
      this.progress = (this.currentTime / this.duration) * 100;
    },
    onLoadedMetadata(event) {
      this.duration = event.detail.duration;
    },
    startDrag(event) {
      this.dragging = true;
      this.startTime = event.touches[0].clientX;
      this.startX = this.progress;
    },
    onDragging(event) {
      if (this.dragging) {
        let moveX = event.touches[0].clientX;
        let offsetX = moveX - this.startTime;
        let newProgress = this.startX + offsetX / (this.$refs.progressBar.offsetWidth / 100);
        newProgress = Math.max(0, Math.min(newProgress, 100));
        this.progress = newProgress;
        this.$refs.myVideo.currentTime = (newProgress / 100) * this.duration;
      }
    },
    endDrag() {
      this.dragging = false;
    },
  },
};
</script>

最后，添加一些基本的样式来美化进度条：

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.progress-bar {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #ccc;
}
.progress-filled {
  height: 100%;
  background-color: #ff0000;
}
.time-display {
  position: absolute;
  bottom: 20px;
  left: 10px;
  color: #fff;
}
</style>

这个示例展示了如何通过监听video组件的timeupdate和loadedmetadata事件来更新当前播放时间和总时长，进而计算出进度条的宽度。同时，通过触摸事件实现了进度条的拖动功能。你可以根据实际需求进一步调整和优化这些代码。