uni-app video组件出现重新播放按钮需手动点击后消失

uni-app video组件出现重新播放按钮需手动点击后消失

示例代码：

<video @error="videoErrorCallback" id="'video_' + i" class="video" title="" :src="item.src" :direction="-90" show-progress="false" object-fit="fill" autoplay="false" :loop="false" :muted="true" :controls="true" :danmu-btn="false" :enable-danmu="false" :page-gesture="false" show-fullscreen-btn="true" :show-play-btn="true" :show-center-play-btn="false" :show-loading="false" :enable-progress-gesture="false" http-cache="false" :play-strategy="3"></video>

```python
videoErrorCallback: function(e){
console.log('视频错误信息:e===='+JSON.stringify(e))
setTimeout(function(){
self.videoContext.stop();
},100)
setTimeout(function(){
self.videoContext.play();
},1000)
},

操作步骤：

  • 第一次播放如果触发了error事件。video界面上会出现红色的重新播放按钮。通过error事件中，如果通过代码控制video重新播放,video上的红色重新播放按钮仍然存在，必须手动点击才会消失。

预期结果：

  • 代码控制重新播放后，重播按钮自动消失。

实际结果：

  • 代码控制重新播放后，重播按钮仍然存在。

bug描述：

  • uniapp离线打包或者自定义基座，第一次播放如果触发了error事件。video界面上会出现红色的重新播放按钮。通过error事件中，如果通过代码控制video重新播放,video上的红色重新播放按钮仍然存在，必须手动点击才会消失。 安卓手机都会出现这个问题。不是特定机型的问题。

更多关于uni-app video组件出现重新播放按钮需手动点击后消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

你好，请问你有解决这个问题吗？

更多关于uni-app video组件出现重新播放按钮需手动点击后消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请问这个问题有解决方案吗？我也遇到了

换成这个播放url会复现该问题吗？ https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4 如果复现，可否提供一个简单复现的demo

可以使用nvue解决，但好像会有另一个问题

这是一个已知的 uni-app video 组件在 Android 平台上的渲染问题。当视频触发 error 事件后，原生控件会显示一个红色的重播按钮，这个按钮属于原生 UI 层，通过 videoContext 的 play() 方法重新播放视频时，原生层没有收到隐藏该按钮的指令。

解决方案：

核心思路是避免直接操作 videoContext，而是通过重置视频的 src 来强制视频组件重新渲染，从而清除残留的原生UI状态。

  1. 修改 video 组件绑定： 将 :src 改为动态绑定一个数据变量，而不是直接绑定 item.src。

    <video 
    ...其他属性
    :src="currentVideoSrc" 
    @error="videoErrorCallback">
</video>

  2. 修改 error 回调逻辑： 在 error 事件中，不直接调用 play()，而是先清空 src（触发组件卸载），再在下一个事件循环中重新设置 src（触发组件重新加载和播放）。

    videoErrorCallback: function(e) {
    console.log('视频错误信息:e====' + JSON.stringify(e));
    let self = this;
    // 1. 先将src置空，促使video组件重置
    self.currentVideoSrc = '';
    
    // 2. 在下一次渲染周期后，重新赋予src值。视频会自动尝试播放（如果autoplay为true）或进入可播放状态。
    setTimeout(() => {
        self.currentVideoSrc = e.target.dataset.src; // 或你原来的item.src
        // 如果需要确保播放，可以在这里获取context并调用play()
        // self.videoContext.play(); 
    }, 50); // 一个很短的延时即可
},
回到顶部