一行代码搞定react-native-webview 安卓无法播放h5视频问题

简介: 一行代码搞定react-native-webview 安卓无法播放h5视频问题

最近在开发APP功能的时候遇到一个问题,之前也没有遇到这样的需求所以也没有研究过。

功能是这样的:项目中有个webview 加载h5页面,h5页面中有视频播放,IOS端可以点开直接播放,并且有预览画面,而安卓端却没有这个预览画面,且不能直接播放。

一开始怀疑是Android的版本问题,一顿查阅发现并没有什么软用。最后还是在reactnative中文网重新仔细的查看了关于Webview的API,才找到解决方案。

如下图所示,只需要在webview中添加这个mixedContentMode属性就好,真的是一行代码搞定,哈哈

微信图片_20220609184218.png

代码中使用如下:

import { WebView } from 'react-native-webview';
        <WebView
          ref={view => (this.webview = view)}
          source={{ uri: url }}
          mixedContentMode={'compatibility'}
        />
目录
相关文章
|
监控 前端开发 API
React代码在电脑监控软件开发中的应用
这篇文章除了介绍React在电脑监控软件开发中的应用,还展示了如何通过组件化构建监控界面,如`MonitorDashboard`、`StatusWidget`和`ActivityLog`组件。文章强调了React的生命周期方法和Hooks在实时数据获取和显示中的作用,如`SystemStatus`组件的`useEffect`钩子。此外,还讲解了如何监听和记录用户行为的`UserActivity`组件,以及利用axios自动提交监控数据的`DataSubmitter`组件。React的这些特性使得开发高效、响应式的监控软件变得更加便捷。
281 8
|
5月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
887 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
5月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
742 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
5月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
949 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
5月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
283 0
|
编解码 安全 Android开发
如何修复 Android 和 Windows 不支持视频编解码器的问题?
视频播放时遇到“编解码器不支持”错误(如0xc00d36c4或0xc00d5212)是常见问题,即使文件格式为MP4或MKV。编解码器是编码和解码数据的工具,不同设备和版本支持不同的编解码器。解决方法包括:1) 安装所需编解码器,如K-Lite Codec Pack;2) 使用自带编解码器的第三方播放器,如VLC、KMPlayer等。这些方法能帮助你顺利播放视频。
|
资源调度 前端开发 Android开发
如何在 React Native 中进行代码签名验证?
如何在 React Native 中进行代码签名验证?
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
402 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
|
缓存 前端开发 JavaScript
React 视频弹幕组件 Video Danmaku
视频弹幕(Danmaku)是在线视频平台中实时显示用户评论的方式,增强互动体验。本文介绍如何在React中实现视频弹幕组件,涵盖基本结构、常见问题及解决方案,如避免弹幕重叠、优化性能、确保同步等,并通过代码示例详细解释。帮助开发者解决样式不一致、输入验证不足和加载延迟等问题,提供实用参考。
529 20