<template>
<video id="videoPlayback" :show-center-play-btn="false" :style="{ width: windowWidth + 'px' }" :src="video.src"
@timeupdate="videoTimeupdate"/>
<!-- 后退按钮 -->
<button @tap="changeVideo('back')" >后退10s</button>
<!-- 前进按钮 -->
<button @tap="changeVideo('go')" >前进10s</button>
</template>
<script>
export default {
data() {
return {
duration: 10,
videoContext: null,
windowWidth: '750',
video: {
src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/360e4b20-4f4b-11eb-8a36-ebb87efcf8c0.mp4',
currentTime: 0,
duration: 0
}
};
},
onLoad() {
this.windowWidth = uni.getSystemInfoSync().windowWidth;
},
onReady() {
this.videoContext = uni.createVideoContext('videoPlayback');
},
methods: {
changeVideo(type) {
console.log(this.videoStatus,type);
if (!this.videoStatus) return;
let tempTime = 0;
if (type == 'back') {
//当前时间是0秒时,按钮无效
if (!this.video.currentTime) {
return;
}
if (this.video.duration) {
tempTime = this.video.currentTime - this.duration;
//uniapp video回退有坑
tempTime <= 0 ? this.videoContext.seek(0) : this.videoContext.seek(tempTime.toFixed(0));
}
} else if (type == 'go') {
//如果视频不在播放则播放
if (this.video.duration) {
tempTime = this.video.currentTime + this.duration;
//设置跳转播放时间
this.video.duration >= tempTime ? this.videoContext.seek(tempTime.toFixed(0)) : this.videoContext.seek(this.video.duration.toFixed(0));
}
}
},
videoTimeupdate(e) {
this.video = {
...e.detail
};
}
}
};
</script>
- 发布:2022-07-08 10:36
- 更新:2022-07-21 19:05
- 阅读:584
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: windows
HBuilderX类型: 正式
HBuilderX版本号: 3.4.18
手机系统: iOS
手机系统版本号: iOS 14
手机厂商: 苹果
手机机型: iphone6s iphone11
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
打开页面播放视频,因为我实现的功能是快进播放10秒,后退10秒。前进时正常的,后退测试需要等播放到10s后再点击后退,比如到11s就会出现回退不了,并且视频进度条卡死的问题,但是小于十秒,也就是回退到0s是正常的
打开页面播放视频,因为我实现的功能是快进播放10秒,后退10秒。前进时正常的,后退测试需要等播放到10s后再点击后退,比如到11s就会出现回退不了,并且视频进度条卡死的问题,但是小于十秒,也就是回退到0s是正常的
预期结果:
通过seek设置视频的任何时间都是正常的
通过seek设置视频的任何时间都是正常的
实际结果:
在ios上播放视频通过seek回退到之前的时间会卡死
在ios上播放视频通过seek回退到之前的时间会卡死
bug描述:
video seek BUG始终未解决
经过测试
H5 端
通过seek设置设置视频前进和后退都正常
App端
android 12 video通过seek设置视频前进和后退都正常
ios 14.8.1 15.4.1均存在通过seek设置视频前进正常,后退则无效,而且视频进度条卡死的问题
麻烦官方尽快修复,影响目前开发的功能不发正常使用