newActivity
newActivity
  • 发布:2022-10-11 11:00
  • 更新:2023-01-11 11:34
  • 阅读:476

【报Bug】video组件播放音画严重不同步

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 专业版 19044.2075

HBuilderX类型: 正式

HBuilderX版本号: 3.6.4

手机系统: 全部

手机厂商: 华为

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

华为mate40 鸿蒙3.0 iphone7 ios13.6

示例代码:

测试代码:

<template>  
    <view class="chat_video_all">  
        <video id="videoPlayer"   
            autoplay  
            class="chat_video"   
            :src="url"  
            @timeupdate="timeupdate"   
            @play="startRecord"   
            @pause = "stopRecord"   
            @ended = "stopRecord"  
        >  
            <cover-view class="video_close"></cover-view>  
            <cover-view :class="playSpeed === speedArray.speed1_5.speed ? 'video_speed1 video_speed_choosed' : 'video_speed1'" @click="changeSpeed(speedArray.speed1_5.speed)">{{speedArray.speed1_5.speed}}</cover-view>  
            <cover-view :class="playSpeed === speedArray.speed1_25.speed ? 'video_speed2 video_speed_choosed' : 'video_speed2'" @click="changeSpeed(speedArray.speed1_25.speed)">{{speedArray.speed1_25.speed}}</cover-view>  
            <cover-view :class="playSpeed === speedArray.speed1_0.speed ? 'video_speed3 video_speed_choosed' : 'video_speed3'" @click="changeSpeed(speedArray.speed1_0.speed)">{{speedArray.speed1_0.speed}}</cover-view>  
        </video>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                loading: false,  
                url: '',  
                playSpeed: 1.0,  
                speedArray: {  
                    speed1_5: {  
                        speed: 1.5  
                    },  
                    speed1_25: {  
                        speed: 1.25  
                    },  
                    speed1_0: {  
                        speed: 1.0  
                    }  
                },  
                videoContext: null  
            }  
        },  
        onLoad() {  
            this.loading = true;  
            this.url = "https://img.tzruiqijiaoyu.com/video/v2/yOXg9CbO1rYF6ewcHC2MF6bHu729Mrgocj4N--0Z4EU9F0vQSzp4Yc6K6dyhb4JRbaHXtVmqftqz7xoWLBdD4UPoqR5PUkaYEXvJgyTQBS4gQvBpUnsteBs_9rK7EbjC.mp4";  
            // this.url = "https://img.tzruiqijiaoyu.com/video/v2/yOXg9CbO1rYF6ewcHC2MF-KoggIH77pWz9QNS5HqRuj61Fr4C_NAyG8aPlPXcU81KYAyMgbN01Ix5QphOxlt-HZHoOcGjUAl6z_ABTsEwc_wSrPR7E5CMbhITTWQWRfI.mp4";  
            this.loading = false;  
        },  
        onReady() {  
            this.videoContext = uni.createVideoContext("videoPlayer");  

        },  
        methods: {  
            changeSpeed(speed) {  
                this.playSpeed = speed;  
                this.changePlaybackRate(speed);  
            },  
            changePlaybackRate(rate) {//设置播放倍速  
                this.videoContext.playbackRate(rate);  
            },  
            timeupdate() {  

            },  
            startRecord() {  

            },  
            stopRecord() {  

            }  
        }  
    }  
</script>  

<style>  
    .video_speed1{  height: 40rpx;line-height: 32rpx; width: 70rpx; text-align: center; border: 1rpx solid #fff; border-radius: 12rpx; color: #fff; z-index: 10; top:var(--status-bar-height); margin-top: 30rpx; right:30rpx; font-size: 24rpx; position: absolute;}  
    .video_speed2{ height: 40rpx;line-height: 32rpx; width: 70rpx; text-align: center; border: 1rpx solid #fff; border-radius: 12rpx; color: #fff; z-index: 10; top:var(--status-bar-height); margin-top: 30rpx; right:120rpx; font-size: 24rpx; position: absolute;}  
    .video_speed3{ height: 40rpx;line-height: 32rpx; width: 70rpx; text-align: center; border: 1rpx solid #fff; border-radius: 12rpx; color: #fff; z-index: 10; top:var(--status-bar-height); margin-top: 30rpx; right:210rpx; font-size: 24rpx; position: absolute;}  
    .video_speed_choosed{ background: #fff; color: #000;}  
</style>

操作步骤:

使用附件的项目复现

预期结果:

video音画同步,倍速播放时音画同步

实际结果:

video音画不同步,倍速播放时音画不同步

bug描述:

视频音画不同步,测试多个平台,多个hb版本,均有问题,ios端尤为严重,但是测试机器使用renderjs 渲染video或者使用浏览器播放视频,是正常的

2022-10-11 11:00 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

我也遇到这个问题了, 有什么解决办法吗

要回复问题请先登录注册