uni-app video组件在播放过程中进入全屏或退出全屏时会触发@play播放事件

uni-app video组件在播放过程中进入全屏或退出全屏时会触发@play播放事件

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

操作步骤：

  • 安卓APP端稳定复现，一定要在播放过程中调用requestFullScreen才会触发@play事件。未开始播放视频或视频播放结束则不触发

预期结果：

  • 只有点击播放和继续播放才应该触发@play事件

实际结果：

  • 播放过程中调用requestFullScreen触发了@play事件

bug描述：

  • video实现播放即全屏的办法，在监听@play事件的时候使用 uni.createVideoContext(e.currentTarget.id, this).requestFullScreen(); 让视频全屏播放
<video class="video-player" :src="item.video_full[0]" :id="`video${index}`" [@play](/user/play)="fullPlay" play-btn-position="center" controls :poster="item.video_cover"></video>

const fullPlay = (e) => {  
    console.log('fullPlay', e)  
    videoContext.value = uni.createVideoContext(e.currentTarget.id, this);  
    videoContext.value.requestFullScreen();  
}

更多关于uni-app video组件在播放过程中进入全屏或退出全屏时会触发@play播放事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app video组件在播放过程中进入全屏或退出全屏时会触发@play播放事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 uni-app video 组件的平台差异问题。在安卓端，全屏操作会触发 video 元素的重新渲染，导致播放状态重置并重新触发 @play 事件。

建议的解决方案：

  1. 使用状态标记控制全屏调用：
let isFullScreenRequested = false

const fullPlay = (e) => {  
    if (!isFullScreenRequested) {
        console.log('fullPlay', e)  
        videoContext.value = uni.createVideoContext(e.currentTarget.id, this);  
        videoContext.value.requestFullScreen();
        isFullScreenRequested = true
    }
}
  1. 监听全屏状态变化：
// 监听全屏状态变化
const onFullscreenChange = (e) => {
    isFullScreenRequested = e.fullScreen
}

// 在 video 组件上添加
@fullscreenchange="onFullscreenChange"
  1. 或者改用 @loadedmetadata 事件：
// 视频元数据加载完成后触发全屏
[@loadedmetadata](/user/loadedmetadata)="onVideoReady"
回到顶部