uni-app webview视频横屏失效

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.98

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：Redmi Note 9 Pro

页面类型：vue

vue版本：vue2

打包方式：云端

App下载地址或H5网址：https://pan.baidu.com/s/1Zcv00rhAnLDCglFXy6kPSg?pwd=pmgz

示例代码：

// webvie页面  
onReady() {    
    // #ifdef APP-PLUS    
    var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效    
    setTimeout(function() {    
        wv = currentWebview.children()[0]    
        wv.setStyle({    
            hardwareAccelerated:true, //开启硬件加速      
            cachemode:'cacheElseNetwork',//优先加载缓存       
            videoFullscreen:'landscape',//视屏横屏无效      
            plusrequire:"none"//禁止远程网页使用plus的API      
        })    
    }, 1000); //如果是页面初始化调用时，需要延时一下    
    // #endif    
},

// 源码视图  
"screenOrientation" : [  
    //可选，字符串数组类型，应用支持的横竖屏  
    "portrait-primary", //可选，字符串类型，支持竖屏  
    "portrait-secondary", //可选，字符串类型，支持反向竖屏  
    "landscape-primary", //可选，字符串类型，支持横屏  
    "landscape-secondary" //可选，字符串类型，支持反向横屏  
],

vueper 1楼•9 天前

反馈的bug这么久了都没有人回复解决吗？现在基本可以确定是x5webview导致上面这个问题，但是没办法解决

h691938207 2楼•9 天前

解决了吗？

nodeper 3楼•9 天前

无解，只能让用户自己升级webview的版本

songsunli 4楼•9 天前

在 uni-app 中使用 webview 组件播放视频时，如果遇到横屏失效的问题，可能是因为 webview 本身没有正确处理横屏逻辑，或者 Android/iOS 系统的某些限制导致的。以下是一些可能的解决方案和调试方法：

1. 检查 Webview 的横屏设置

Android：在 AndroidManifest.xml 中，确保 WebView 所在的 Activity 支持横屏：

<activity
    android:name=".YourActivity"
    android:screenOrientation="sensorLandscape" />

iOS：在 Xcode 中，确保 WebView 所在的 ViewController 支持横屏：在 ViewController 中添加以下代码：

- (BOOL)shouldAutorotate {
    return YES;
}

- (UIInterfaceOrientationMask)supportedInterfaceOrientations {
    return UIInterfaceOrientationMaskLandscape;
}

2. 强制 Webview 横屏

如果默认设置无效，可以尝试在 webview 加载完成后，通过 JavaScript 强制横屏：

<web-view :src="webviewUrl" [@message](/user/message)="handleMessage"></web-view>

在 webview 的页面中，使用 JavaScript 强制横屏：

function rotateToLandscape() {
    if (screen.orientation && screen.orientation.lock) {
        screen.orientation.lock('landscape').catch(function (error) {
            console.log('Orientation lock failed: ', error);
        });
    } else {
        console.warn('Screen orientation API not supported');
    }
}
rotateToLandscape();

3. 使用原生插件

如果 webview 的横屏支持仍然不理想，可以考虑使用原生插件来实现横屏功能：

Android：使用 OrientationEventListener 监听屏幕方向，并动态调整 WebView 的布局。
iOS：使用 UIDeviceOrientation 监听设备方向，并调整 WebView 的旋转。

4. 检查视频播放器设置

如果视频是通过第三方播放器（如 video 标签或 iframe 嵌入的播放器）播放的，确保播放器本身支持横屏：

使用 video 标签时，添加 playsinline 和 webkit-playsinline 属性：
```
<video controls playsinline webkit-playsinline></video>
```
如果是嵌入的第三方播放器（如 YouTube、Vimeo），检查播放器的 API 是否支持横屏。

5. 调试和日志

在 webview 中打开开发者工具，检查是否有错误日志。
使用 console.log 输出屏幕方向信息，确认是否成功触发横屏逻辑。

6. 使用 uni-app 的 `plus` API

uni-app 提供了 plus API，可以用于控制屏幕方向：

plus.screen.lockOrientation('landscape-primary');