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

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

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

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

知识点：

首次看一下react-native-webview在Android端的实现：

代码地址：项目/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview

我们看一下关于mixedContentMode这个属性，当前Android版本大于5.0的时候，设置这个属性所对应的Android设置

模式解读：

MIXED_CONTENT_NEVER_ALLOW：Webview不允许一个安全的站点（https）去加载非安全的站点内容（http）,比如，https网页内容的图片是http链接。强烈建议App使用这种模式，因为这样更安全。

MIXED_CONTENT_ALWAYS_ALLOW：在这种模式下，WebView是可以在一个安全的站点（Https）里加载非安全的站点内容（Http）,这是WebView最不安全的操作模式，尽可能地不要使用这种模式。

MIXED_CONTENT_COMPATIBILITY_MODE：在这种模式下，当涉及到混合式内容时，WebView会尝试去兼容最新Web浏览器的风格。一些不安全的内容（Http）能被加载到一个安全的站点上（Https），而其他类型的内容将会被阻塞。这些内容的类型是被允许加载还是被阻塞可能会随着版本的不同而改变，并没有明确的定义。这种模式主要用于在App里面不能控制内容的渲染，但是又希望在一个安全的环境下运行。

webview的默认值是never,即WebView中不会加载非安全的链接

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

代码中使用如下，只需要设置mixedContentMode的值为'compatibility'即可。