uni-app wap2app 竖屏视频无法全屏播放

uni-app wap2app 竖屏视频无法全屏播放

| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| HBuilderX | 3.1.21 | 云端         |

产品分类：HTML5+

手机系统：Android  
手机系统版本号：Android 10  
手机厂商：华为  
手机机型：荣耀8x  

App下载地址或H5网址：[www.hq0771.cn/1.0.9.apk](//ask.dcloud.net.cn/www.hq0771.cn/1.0.9.apk)

### 操作步骤：
- 打开app 搜索357 信息，进入详情页，点击全屏播放

### 预期结果：
- 正常全屏

### 实际结果：
- 无法全屏，来回切换跳横竖屏幕。

### bug描述：
wap2app 封装网站，竖屏的视频，无法全屏。播放来回跳 横竖屏。sitemap配置没有特别配置。https://www.zhaodizhinan.com/house/loupan-detail-381.html 这个页面出问题。

[SVID_20210630_032444_1~1.zip](//ask.dcloud.net.cn/file/download/file_name-U1ZJRF8yMDIxMDYzMF8wMzI0NDRfMX4xLnppcA==__url-Ly9pbWctY2RuLXRjLmRjbG91ZC5uZXQuY24vdXBsb2Fkcy9xdWVzdGlvbnMvMjAyMTA2MzAvNzFlZDM4NjgxNmU5NDVjNzQwZmMxODVmNDE3NzBjM2Q=)

更多关于uni-app wap2app 竖屏视频无法全屏播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app wap2app 竖屏视频无法全屏播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的wap2app视频全屏兼容性问题。在Android系统上，视频全屏播放涉及系统WebView的默认行为，特别是横竖屏切换时容易产生异常。

从你的描述和视频来看，问题可能出在以下几个方面：

  1. WebView全屏处理机制：Android WebView在视频全屏时会强制横屏，但wap2app的容器可能没有正确处理这个横竖屏切换过程，导致来回跳动。

  2. 视频播放器兼容性：不同手机厂商对WebView中视频播放的实现有差异，华为/荣耀机型在这方面存在一些已知的兼容性问题。

  3. 页面CSS影响：原网站可能有一些CSS样式影响了视频全屏时的布局计算。

建议尝试以下解决方案：

方案一：配置横竖屏锁定 在manifest.json中配置屏幕方向：

{
    "plus": {
        "screen": {
            "orientation": "portrait-primary"
        }
    }
}
回到顶部