uni-app 安卓端 H5 video组件点击控件的全屏按钮无效

uni-app 安卓端 H5 video组件点击控件的全屏按钮无效

操作步骤：

  • 跟据上述代码块 在H5页面中展示视频，点击全屏按钮，无法全屏

预期结果：

  • 点击全屏按钮可以正常全屏

实际结果：

  • 点击全屏按钮无法全屏

bug描述：

  • 如标题所示，在H5端使用video组件后 显示全屏按钮，点击按钮，全屏无效。目前只测试了安卓 该机型。
信息项 信息值
产品分类 HTML5+
HBuilderX版本号 3.8.12
手机系统 Android
手机系统版本号 Android 13
手机厂商 魅族
手机机型 MEIZU 18s
打包方式 离线

复现视频 复现视频.zip


更多关于uni-app 安卓端 H5 video组件点击控件的全屏按钮无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

测试了，可以全屏 <template>
<view class="container">

</view>
</template>

<script> export default { data() { return { }; }, onLoad() { }, methods: { } }; </script> <style lang="scss" scoped> </style>

更多关于uni-app 安卓端 H5 video组件点击控件的全屏按钮无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


按照您的方法测试过，依旧无法实现，浏览器可以全屏，在移动端无发全屏，亲参照我新上传的附件视频

回复 l***@163.com: 附件有问题，解压不了(●’◡’●)

这个问题的原因可能是Android系统对H5 video全屏功能的限制。以下是解决方案：

  1. 检查是否启用了x5内核（推荐方案）： 在manifest.json中配置：
"app-plus": {
  "kernel": {
    "android": "x5"
  }
}
  1. 如果不想使用x5内核，可以尝试添加playsinline属性：
<video controls playsinline webkit-playsinline x5-playsinline></video>
  1. 确保video元素有正确的样式设置：
video {
  object-fit: fill;
  width: 100%;
}
  1. 对于魅族机型，可能需要额外处理：
// 强制横屏方案
function requestFullScreen() {
  let video = document.querySelector('video');
  if(video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
  }
}
回到顶部