1***@qq.com
1***@qq.com
  • 发布:2020-08-06 18:28
  • 更新:2020-08-06 18:28
  • 阅读:1926

【报Bug】ios端 video组件 播放高码率视频,卡顿、声画不同步严重

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.8.4

手机系统: iOS

手机系统版本号: iOS 12.4

手机厂商: 苹果

手机机型: iphone5s

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template> <div> <video id='video1' ref="mainVideo" class="video" :src="src" autoplay="false" duration="" controls="true" loop="true" :muted="false" initial-time="" direction="-90" show-mute-btn="true" @play="onstart" @pause="onpause" @ended="onfinish" @error="onfail" @waiting="waiting"
@timeupdate="timeupdate" @fullscreenchange="fullscreenchange"></video>
<button class="btn" @click="play">播放</button>
<button class="btn" @click="pause">暂停</button>
</div>
</template>

<script>
const sysInfo = uni.getSystemInfoSync();
export default {
data: {
src: 'http://cdnoss.banlamwe.com/up/20200713/92c6746514198123d668627b5c8291b9.mp4',
fil: true,
list: [{
text: '要显示的文本',
color: '#FF0000',
time: 9
}],
currentClock: '',
videoDuration: ''
},
onReady() {
this.context = uni.createVideoContext("video1", this);
},
computed: {
processWidth() {
if (this.fullScreen) {
return sysInfo.windowHeight - 69 - (sysInfo.platform == 'ios' ? 0 : sysInfo.statusBarHeight);
} else {
return sysInfo.screenWidth - 69;
}
},
},
methods: {
onstart(e) {
console.log("onstart:" + JSON.stringify(e));
},
onpause(e) {
console.log("onpause:" + JSON.stringify(e));
},
onfinish(e) {
console.log("onfinish:" + JSON.stringify(e));
},
onfail(e) {
console.log("onfail:" + JSON.stringify(e));
},
fullscreenchange(e) {
console.log("fullscreenchange:" + JSON.stringify(e));
},
waiting(e) {
console.log("waiting:" + JSON.stringify(e));
},
timeupdate(e) {
// console.log("timeupdate:" + JSON.stringify(e));
this.currentClock = e.detail.currentTime;
this.videoDuration = e.detail.duration;
var a = this.currentClock/this.videoDuration * this.processWidth;
},

        play() {  
            this.context.play();  
        },  
        pause() {  
            this.context.pause();  
        },  
        seek() {  
            var pos = this.currentClock + 10;  
            console.log(pos)  
            this.$refs.mainVideo.seek(pos);  
        },  
        stop() {  
            this.context.stop();  
        },  
        fullScreen() {  
            this.context.requestFullScreen({  
                direction: 90  
            });  
        },  
        exitFullScreen() {  
            this.context.exitFullScreen();  
        },  
        sendDanmu() {  
            this.context.sendDanmu({  
                text: '要显示的弹幕文本',  
                color: '#FF0000'  
            });  
        },  
        playbackRate() {  
            this.context.playbackRate(2);  
        },  
        handleJump() {  
            uni.navigateTo({  
                url: '/pages/API/websocket-global/websocket-global'  
            })  
        }  
    },  
    onUnload() {  
        console.log('onunload');  
    }  
}  

</script>

<style>
.video {
width: 750rpx;
height: 400rpx;
background-color: #808080;
}

.btn {  
    margin-top: 5px;  
    margin-bottom: 5px;  
    ;  
}  

</style>

操作步骤:

播放视频

预期结果:

播放流畅,声画同步

实际结果:

声画不同步

bug描述:

video组件 播放高码率视频,卡顿、声画不同步严重
视频测试地址:http://cdnoss.banlamwe.com/up/20200713/92c6746514198123d668627b5c8291b9.mp4

2020-08-06 18:28 负责人:无 分享
已邀请:

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