8***@qq.com
8***@qq.com
  • 发布:2021-01-13 14:49
  • 更新:2021-01-13 16:39
  • 阅读:1239

【报Bug】App端 video组件 问题

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Microsoft Windows [Version 10.0.17763.1217]

HBuilderX类型: 正式

HBuilderX版本号: 3.0.5

手机系统: 全部

手机机型: iPhone X

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

App下载地址或H5⽹址: https://cam.crystal-yida.cn/CRDCWebAPI/UpdateFile/MobileYiDa.apk

测试过的手机:

Android: 小米11 版本 Android 11 IOS:iPnoneX 版本 IOS 14

示例代码:
<template>  
    <view>  

        <view class="page-section" >  
            <video class="VideoCss" id="myVideo" :src="VideoSrc"   
            enable-danmu  controls enable-progress-gesture="false" :title="title"  
            @timeupdate="timeupdate" @ended="PlayEnd" @error="videoErrorCallback"   
            @pause = "VideoPause" @loadedmetadata="loadedmetadata"  
            @play="VideoPlay"  
            v-if="VideoSrc !=''"  
            >  
            </video>  
        </view>  

    </view>  
</template>  

<script>  

    let _this;  
    let TimeRule=null  
    export default {  
        data() {  
            return {  
                OldTime:0,  
                WatchTime:0,  
                title:'video',  
                inputValue: '',  
                BgUrl:this.$BaseImgServerUrl+'LrgMapVideoBg.jpg',  
                VideoSrc:'',  
                LangList:{},  
                FileType:0,  
                ImgSrc:'',  
                ImgHeight:'0rpx',  
                ImgUpdateStatus:true,  
                LearnTime:0,  
                IsOpenFile:false,  
                Time:0,  
                LearingStatus:'',  
                NowVideoTime:0,     //当下视频学习的时间点  

                // VideoStatus:0,       //视频状态,进入画面无播放为0,不记录  
                LastVideoTime:0     ,//上一次视频学习的时间点  
                SuccessStatus:0     ,//视频是否已完成  
                ServerTime:'',  
                MapID:'',  
                LoadVideo:false,    //视频是否已经加载  
                TimingNum:0  
            }  
        },  
        beforeCreate() {  

        },  
        async onLoad(e){  

            this.VideoSrc = 'https://cam.crystal-yida.cn/CRDCWebAPI/UploadFile/Courseware/78BCB3AE66A24EE9AB96697FFA4D560C.mp4'  

            this.$nextTick(function(){  
                this.context = uni.createVideoContext("myVideo", this)  
            })  

        },  

        methods: {  
            loadedmetadata(e){  
                console.log("视频开始播放")  
                console.log(e)  
                this.LearnTime= Math.round(e.detail.duration)  
                if(Number(this.LastVideoTime)!=0){  
                    this.context.seek(Number(this.LastVideoTime))  
                }  
                this.LoadVideo=true  
            },  
            //当视频开始播放时触发  
            VideoPlay(e){  
                console.log("视频开始播放")  
                console.log(e)  
            },  
            //视频暂停  
            VideoPause(e){  
            },  
            //视频播放出错  
            videoErrorCallback: function (e) {  
                console.log("视频加载失败")  
                console.log(e)  

            },  
            //播放进度发生变化  
            timeupdate(e){  
                console.log("timeupdate")  
                this.NowVideoTime=Math.round(e.detail.currentTime)  

                if(this.LearingStatus=='0'){  
                    return  
                }  

                let NowTime=Math.round(e.detail.currentTime)  
                if(NowTime-this.OldTime>1 && NowTime>this.WatchTime ){  
                    this.context.seek(this.OldTime)  
                    return  
                }  
                this.OldTime = NowTime  
                if(NowTime>this.WatchTime){  
                    this.WatchTime=NowTime  
                }  
            },  
            //视频播放结束  
            PlayEnd(e){  
                console.log("End")  
                this.SuccessStatus=1  
                this.context.seek(0)  
            }  
        },  
        onShow() {  

        },  
        onUnload() {  

        },  
        onHide() {  

        }  
    }  
</script>  

<style>  
    @import url("LRG0134");  
</style>

操作步骤:

Android 系统 小米11 进入页面,点击播放;
IOS 系统 iPnoneX:
1.进入页面,点击播放;
2.拖拉底部进度条使其快进;

预期结果:

Android 系统 小米11 正常播放;
IOS 系统 iPnoneX:
1.播放正常,触发loadedmetadata函数,正常运行代码内方法;

loadedmetadata(e){  
                console.log("视频开始播放")  
                console.log(e)  
                this.LearnTime= Math.round(e.detail.duration)  
                if(Number(this.LastVideoTime)!=0){  
                    this.context.seek(Number(this.LastVideoTime))  
                }  
                this.LoadVideo=true  
            }

2.快进触发timeupdate函数,检测是否当前播放时间点是否与上一时间点差距超过1秒,超过跳回上一时间点;

timeupdate(e){  
                console.log("timeupdate")  
                this.NowVideoTime=Math.round(e.detail.currentTime)  

                if(this.LearingStatus=='0'){  
                    return  
                }  

                let NowTime=Math.round(e.detail.currentTime)  
                if(NowTime-this.OldTime>1 && NowTime>this.WatchTime ){  
                    this.context.seek(this.OldTime)  
                    return  
                }  
                this.OldTime = NowTime  
                if(NowTime>this.WatchTime){  
                    this.WatchTime=NowTime  
                }  
            }

实际结果:

Android 系统 小米11 无法正常播放视频;
IOS 系统 iPnoneX:
1.正常播放,当无法触发loadedmetadata(e)函数;
2.拖拉快进后,拖拉超一秒,视频内容已跳转至拖拉前的时间点,但是底部进度条无法正常显示时间点,timeupdate函数的触发频率变低。

bug描述:

Android 版错误 测试手机 小米 11

无法播放视频

IOS 版错误 测试手机 iPnone X

video 组件内的方法loadedmetadata()无效
拖拉进度条快进。使其在timeupdate()方法内使用seek()跳转后 底部进度条无法跳转至对应时间点, timeupdate 触发频率由原来的 205ms一次 变为 几秒一次

2021-01-13 14:49 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

@loadedmetadata目前支持微信小程序和H5。
seek后底部进度条无法跳转至对应时间点,此问题已验证,排查中,已加分,感谢您的反馈!

  • 8***@qq.com (作者)

    好的,非常感谢您的答复,另外请您确认一下 Android 11 播放视频的问题,App测试中除了手机版本为 Android 11 会出现播放视频错误外,其它版本的手机均能正常播放视频。

    2021-01-14 09:03

  • DCloud_UNI_Anne

    回复 8***@qq.com: Android 11播放视频错误具体指什么?请详细描述,另外用你小米 11手机,试下hello uni-app里面的视频,是否会复现您说的问题,不能的话你需要排查出来具体你哪个页面,甚至哪一行导致的。

    2021-01-14 11:12

该问题目前已经被锁定, 无法添加新回复