uni-app nvue web-view 腾讯视频全屏问题

uni-app nvue web-view 腾讯视频全屏问题

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：Alpha

HBuilderX版本号：3.1.5

手机系统：Android

手机系统版本号：Android 10

手机厂商：华为

手机机型：安卓

页面类型：nvue

打包方式：云端


### 示例代码：

```html
<web-view ref="webview" style="width:750rpx;height:2000rpx;" src="http://duocifang.dayin1.top/index/index/article?article_id=22"></web-view>

操作步骤：

<web-view ref="webview" style="width:750rpx;height:2000rpx;" src="http://duocifang.dayin1.top/index/index/article?article_id=22"></web-view>

预期结果：

暂停全屏都可以

实际结果：

webview中的腾讯视频全屏点击无效，点击没反应，但是暂停是可以的

bug描述：

nvue下，安卓端：webview中的腾讯视频全屏点击无效，点击没反应，但是暂停是可以的；ios端正常，暂停全屏都可以


更多关于uni-app nvue web-view 腾讯视频全屏问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

哎，官方是不打算管这个问题了吗。。。

更多关于uni-app nvue web-view 腾讯视频全屏问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的nvue web-view组件在Android端的兼容性问题。由于nvue使用原生渲染，其web-view组件与vue页面的web-view实现机制不同，可能导致部分H5视频播放器的全屏功能失效。

目前可行的解决方案：

  1. 改用vue页面：将使用web-view的页面改为vue页面，vue页面的web-view基于系统浏览器内核，对H5视频播放器的兼容性更好。

  2. 调整web-view尺寸：尝试将web-view的高度设置为100vh，确保视频播放器有足够的空间识别全屏操作：

<web-view style="width:750rpx;height:100vh;" src="你的URL"></web-view>
回到顶部