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
此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事件触发存在异常。
主要问题点:
- iOS系统视频播放器存在内置缓冲机制,导致实际播放时间与进度条显示时间不同步
- 在拖动进度条后,系统需要重新缓冲数据,期间timeupdate事件可能不会触发
- seek操作在iOS上存在延迟,不会立即生效
建议解决方案:
- 使用
@loadedmetadata
事件获取视频总时长,避免依赖timeupdate的实时性 - 在seek操作后添加适当延迟,确保iOS系统完成缓冲
- 考虑使用
@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)
}
}