uni-app 安卓 videoContext.exitFullScreen() H5端退出全屏API无效

uni-app 安卓 videoContext.exitFullScreen() H5端退出全屏API无效

操作步骤：

  • 使用HBuilder打开项目，运行到chrome，得到url后，用本机ip替换localhost来真机调试，播放视频，点击全屏，等待视频到10s

预期结果：

  • 视频暂停并退出全屏

实际结果：

  • 视频暂停但没有退出全屏

bug描述：

视频点击全屏按钮后进入全屏，到一定时间触发exitFullScreen方法退出全屏，无法退出全屏，只有安卓机会出现，ios的h5可以正常退出全屏
demo已上传

信息类别 信息内容
产品分类 uniapp/H5
PC开发环境 Windows
PC开发环境版本 win10
HBuilderX类型 正式
HBuilderX版本 3.1.4
浏览器平台 微信内置浏览器
浏览器版本 MicroMessenger 8.0.1.1841
项目创建方式 HBuilderX

下载demo


更多关于uni-app 安卓 videoContext.exitFullScreen() H5端退出全屏API无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

参考视频组件文档倒数第二行。
目前这类浏览器拦截视频后，并未提供控制接口，甚至会强制插入广告。。。

更多关于uni-app 安卓 videoContext.exitFullScreen() H5端退出全屏API无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的安卓微信浏览器兼容性问题。在H5环境下，安卓微信浏览器对videoContext.exitFullScreen()方法的支持存在限制。

问题分析：

  • 安卓微信浏览器对HTML5 video全屏API的实现与标准存在差异
  • 在安卓端，浏览器可能没有完全遵循W3C全屏API规范
  • iOS Safari浏览器对全屏API的支持相对完善

临时解决方案：

  1. 使用原生video元素的webkitExitFullScreen()方法：
const video = document.getElementById('yourVideoId');
if (video.webkitExitFullScreen) {
    video.webkitExitFullScreen();
}

  1. 结合video组件的@fullscreenchange事件监听全屏状态变化

  2. 考虑使用条件编译针对不同平台处理：

// #ifdef H5
if (uni.getSystemInfoSync().platform === 'android') {
    // 安卓H5特殊处理
    const video = document.querySelector('video');
    video.webkitExitFullScreen && video.webkitExitFullScreen();
} else {
    videoContext.exitFullScreen();
}
// #endif
回到顶部