uni-app nvue web-view 富文本视频全屏问题

uni-app nvue web-view 富文本视频全屏问题

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本号 win10
HBuilderX类型 Alpha
HBuilderX版本 3.1.3
手机系统 Android
手机版本号 Android 10
手机厂商 小米
手机机型 note 9 pro
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • nvue web-view 富文本内容中有视频播放，点击全屏

预期结果：

  • 手机可以全屏

实际结果：

  • 苹果可以，安卓不行，
  • 那么nvue 富文本内容中有视频全屏问题，有其他替补方案解决？

bug描述：

  • nvue web-view 富文本内容中有视频播放
  • 这时视频不能全屏，如何解决

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

4 回复

请提供简单、可稳定复现、能直接运行的完整示例（上传附件），方便我们快速排查问题哦。 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

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


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

nvue下，安卓端，使用webview，src=“http://duocifang.dayin1.top/index/index/article?article_id=22”，可以查看效果

针对uni-app nvue中web-view播放视频无法全屏的问题，以下是解决方案：

  1. 原生方案： 在Android上，web-view默认不支持视频全屏，需要通过原生插件扩展功能。可以修改AndroidManifest.xml添加硬件加速：
<application android:hardwareAccelerated="true">
  1. 替换组件方案：
  • 使用video组件替代web-view播放视频
  • 通过rich-text组件解析富文本，单独处理视频标签
  • 提取视频URL后使用原生video组件播放
  1. 混合渲染方案：
// 解析富文本提取视频
let videos = content.match(/<video.*?src=['"](.*?)['"]/);
if(videos){
    this.videoUrl = videos[1];
    this.showVideo = true;
}

<rich-text v-if="!showVideo" :nodes="content"></rich-text>
<video v-else :src="videoUrl" controls fullscreen></video>
  1. 插件方案：
  • 使用uni-app官方video插件
  • 或集成第三方播放器如ijkplayer
  1. 临时方案： 在web-view的user-agent中添加标志，部分Android设备会识别：
<web-view :user-agent="'Mozilla/5.0 (Linux; Android 10) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.91 Mobile Safari/537.36'"></web-view>
回到顶部