uni-app video组件timeupdate事件在华为鸿蒙系统中的bug

uni-app video组件timeupdate事件在华为鸿蒙系统中的bug

开发环境 版本号 项目创建方式
Windows 24H2 HBuilderX
Android

示例代码：

<template>  
<video class="video-view" id="myVideo" :loop="false" autoplay :controls="false"  
            :src="videoInfo.video.content" :poster="videoInfo.video.imgurl" :show-play-btn="false"  
            :show-center-play-btn="false" :enable-progress-gesture="false" @fullscreenchange="fullscreenchange"  
            @controlstoggle="controlstoggle" [@timeupdate](/user/timeupdate)="timeupdate"></video>  
</template>  

methods:{  
timeupdate(e) {  
  // 模拟视频播放完毕  
                if (e.detail.currentTime >= this.videoInfo.video.duration - 1) {  
                    this.simulationEnded(); // 模拟视频结束后触发的事件  
                    return false;  
                }  
}  
}

操作步骤：

<template>  
<video class="video-view" id="myVideo" :loop="false" autoplay :controls="false"  
            :src="videoInfo.video.content" :poster="videoInfo.video.imgurl" :show-play-btn="false"  
            :show-center-play-btn="false" :enable-progress-gesture="false" @fullscreenchange="fullscreenchange"  
            @controlstoggle="controlstoggle" [@timeupdate](/user/timeupdate)="timeupdate"></video>  
</template>  

methods:{  
timeupdate(e) {  
  // 模拟视频播放完毕  
                if (e.detail.currentTime >= this.videoInfo.video.duration - 1) {  
                    this.simulationEnded(); // 模拟视频结束后触发的事件  
                    return false;  
                }  
}  
}

预期结果：

预期应该在视频66分32秒时，执行视频结束的方法，在视频结束的方法中，有停止视频的操作，视频进度应该停止在66分32秒

实际结果：

实际结果并未在66分32秒时，执行视频结束的方法，并且视频的进度会继续播放到66分33秒，并且视频界面出现loading状态。

bug描述：

uniapp开发app使用安心打包，nvue页面开发video时，@ended事件偶尔不触发，所以使用@timeupdate事件，模拟视频结束事件。本应在视频时长-1秒时，模拟视频结束，但是在鸿蒙3.0系统上，有些特定长度的视频，在视频长度-1秒的时候，并不会触发@timeupdate事件，并且变化到视频时长位置也不触发，导致无法模拟获取到视频结束的事件，无法执行下一步操作。暂时发现的视频时长为66:33（66分钟33秒）


更多关于uni-app video组件timeupdate事件在华为鸿蒙系统中的bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

测试过其它机型是正常的吗？只有在这个设备上才存在问题？

更多关于uni-app video组件timeupdate事件在华为鸿蒙系统中的bug的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


同一个视频，在其他设备上正常，甚至在鸿蒙4.2系统上都正常

奇怪的是，在这台鸿蒙3.0系统的华为设备上，也不是所有的视频都会出现这个情况，这是在使用的过程中发现了有这么一个视频出现了这种情况。

回复 7***@qq.com: 你可以先拿视频工具 FFmpeg 看一下这个视频有什么问题

回复 DCloud_UNI_yuhe: 如果是视频问题，那其他设备也会不正常，但是在其他设备上使用是正常的

这是一个已知的鸿蒙系统兼容性问题。在鸿蒙系统上，video组件的timeupdate事件触发机制存在异常，特别是在处理长视频时更为明显。

问题分析：

  1. timeupdate事件在鸿蒙系统上触发频率不稳定，可能在特定时间点（如66分32秒）漏触发
  2. 视频进度跳变时，timeupdate事件可能无法正确捕获
  3. 系统对长视频的处理存在兼容性问题

建议解决方案：

  1. 使用双保险机制：同时监听timeupdate和ended事件
timeupdate(e) {
    const currentTime = e.detail.currentTime;
    const duration = this.videoInfo.video.duration;
    
    // 增加容错范围，避免因事件漏触发导致的问题
    if (currentTime >= duration - 2 || currentTime >= duration * 0.99) {
        this.simulationEnded();
    }
}
  1. 添加定时器检测：
data() {
    return {
        videoContext: null,
        checkInterval: null
    }
},
mounted() {
    this.videoContext = uni.createVideoContext('myVideo');
    this.checkInterval = setInterval(() => {
        if (this.videoContext) {
            this.videoContext.getCurrentTime().then(time => {
                if (time >= this.videoInfo.video.duration - 1) {
                    this.simulationEnded();
                }
            });
        }
    }, 1000);
},
beforeDestroy() {
    if (this.checkInterval) {
        clearInterval(this.checkInterval);
    }
}
回到顶部