uni-app 鸿蒙next iframe 嵌套的web页面 video无法全屏

uni-app 鸿蒙next iframe 嵌套的web页面 video无法全屏

操作步骤：

  • iframe 嵌套的web页面 video无法全屏

预期结果：

  • 可以正常全屏

实际结果：

  • 不能全屏

bug描述：

  • iframe 嵌套的web页面 video无法全屏

| 项目信息             | 详细信息     |
|----------------------|--------------|
| 产品分类             | uniapp/App   |
| PC开发环境操作系统   | Mac          |
| PC开发环境操作系统版本号 | 15.5         |
| HBuilderX类型       | 正式         |
| HBuilderX版本号     | 4.74         |
| 手机系统             | HarmonyOS NEXT |
| 手机系统版本号       | HarmonyOS 5.0.5 |
| 手机厂商             | 华为         |
| 手机机型             | mate60       |
| 页面类型             | vue          |
| vue版本              | vue3         |
| 打包方式             | 云端         |
| 项目创建方式         | HBuilderX    |

更多关于uni-app 鸿蒙next iframe 嵌套的web页面 video无法全屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

这个是鸿蒙的web的实现问题，具体得等待华为修复

更多关于uni-app 鸿蒙next iframe 嵌套的web页面 video无法全屏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你有向华为反馈吗

回复 4***@qq.com: 在跟踪

在鸿蒙NEXT系统中，iframe嵌套的web页面video无法全屏是已知的系统级兼容问题。鸿蒙系统对iframe内的全屏API支持存在限制，这属于底层系统对WebView组件的约束。

建议的解决方案：

  1. 使用uni-app的web-view组件替代iframe，该组件在移动端有更好的全屏支持
  2. 通过uni-app的native.js调用原生视频播放器
  3. 在web页面中改用h5原生video标签，并添加playsinline和webkit-playsinline属性

代码示例：

// 使用web-view组件
<web-view src="https://your-web-page.com"></web-view>

// 或使用uni.createVideoContext控制视频播放
const videoContext = uni.createVideoContext('myVideo')
回到顶部