uni-app中video组件在ios端进度条拖动问题

uni-app中video组件在ios端进度条拖动问题

示例代码:

<template>  
  <view class='main'>  
    <video   
      src="https://video.xyyysp.com/03%20%E9%A3%9F%E5%93%81%E7%94%9F%E4%BA%A7%E7%AE%A1%E7%90%86_batch.mp4"  
      id="myVideo"  
      @timeupdate="onPlayer"  
      controls>
    </video>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  

    }  
  },  
  onLoad () {  

  },  
  methods: {  
    onPlayer (e) {  
      console.log(e.detail.currentTime)  
      this.videoContext = uni.createVideoContext('myVideo')  
      if (e.detail.currentTime > 500) {  
        this.videoContext.seek(100)  
        this.videoContext.pause()  
      }  
    }  
  }  
}  
</script>  

<style lang='less' scoped>  
  .main {  
    video {  
      width: 100%;  
    }  
  }  
</style>

操作步骤:

播放视频,监听播放时间变化,拖动进度条,判断当前时间是否大于某一个时间点,大于则返回上一个播放时间点,且暂停,播放视频,监听播放时间变化。

预期结果:

视频播放正常,timeupdate可以实时获取正确的播放时间。

实际结果:

视频播放时间点与进度条时间点不一致,且timeupdate方法没有触发。

bug描述:

video运行在iOS上面时,发现当前播放的画面与进度条展示的时间不一致,拖动进度条效果更明显。 当拖动进度条后表现为:进度条时间为500秒,视频时间播放点为495秒 当当前播放时间大于某一个时间点时,使用seek方法定位到上一个播放点并暂停,表现为:首先进度条为500秒,视频播放时间为495秒,此时视频暂停,但没有立刻定位到seek的时间点。点击播放,此时进度条没有变化,视频在播放,直到视频与进度条时间一致,在这个过程中,timeupdate方法不会被触发。当视频与进度条时间一致后,会定位到seek时间点且再次被暂停。同时,进度条时间为拖动后定位的时间500秒,视频时间为seek时间点,点击播放,timeupdate方法不会触发

相关链接:

开发环境 版本号 项目创建方式
Windows 10教育版 3.0.7 HBuilderX

更多关于uni-app中video组件在ios端进度条拖动问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

此BUG已经在修复了,等待更新吧 https://ask.dcloud.net.cn/question/115250

更多关于uni-app中video组件在ios端进度条拖动问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请问这个bug已经修复完了吗?

回复 春风拂过: 修复了

这是一个已知的iOS平台video组件的兼容性问题。iOS系统对视频播放的控制较为严格,导致进度条拖动和timeupdate事件触发存在异常。

主要问题点:

  1. iOS系统视频播放器存在内置缓冲机制,导致实际播放时间与进度条显示时间不同步
  2. 在拖动进度条后,系统需要重新缓冲数据,期间timeupdate事件可能不会触发
  3. seek操作在iOS上存在延迟,不会立即生效

建议解决方案:

  1. 使用@loadedmetadata事件获取视频总时长,避免依赖timeupdate的实时性
  2. 在seek操作后添加适当延迟,确保iOS系统完成缓冲
  3. 考虑使用@seeked事件监听seek操作完成

代码调整示例:

onPlayer (e) {
  console.log(e.detail.currentTime)
  this.videoContext = uni.createVideoContext('myVideo')
  if (e.detail.currentTime > 500) {
    setTimeout(() => {
      this.videoContext.seek(100)
      this.videoContext.pause()
    }, 100)
  }
}
回到顶部