5***@qq.com
5***@qq.com
  • 发布:2022-07-08 10:36
  • 更新:2022-07-21 19:05
  • 阅读:438

【报Bug】video seek设置时间的存在bug

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows

HBuilderX类型: 正式

HBuilderX版本号: 3.4.18

手机系统: iOS

手机系统版本号: iOS 14

手机厂商: 苹果

手机机型: iphone6s iphone11

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<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>

操作步骤:

打开页面播放视频,因为我实现的功能是快进播放10秒,后退10秒。前进时正常的,后退测试需要等播放到10s后再点击后退,比如到11s就会出现回退不了,并且视频进度条卡死的问题,但是小于十秒,也就是回退到0s是正常的

预期结果:

通过seek设置视频的任何时间都是正常的

实际结果:

在ios上播放视频通过seek回退到之前的时间会卡死

bug描述:

video seek BUG始终未解决

经过测试

H5 端
通过seek设置设置视频前进和后退都正常

App端
android 12 video通过seek设置视频前进和后退都正常
ios 14.8.1 15.4.1均存在通过seek设置视频前进正常,后退则无效,而且视频进度条卡死的问题

麻烦官方尽快修复,影响目前开发的功能不发正常使用

2022-07-08 10:36 负责人:天生DR 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

该问题已反馈相关同事,感谢反馈,已加分,请关注后续版本更新

天生DR

天生DR - 天生我材必有用

bug 已确认 下个版本会修复

要回复问题请先登录注册