HTML5 ionic 项目中的视频标签在 android 设备上不工作

Question

我有一个一年前使用 ionic v1 创建的应用程序，在 iOS 和 Android 上运行都很好。但最近，在 Android 的更新后，视频在三星 S6 和 LG 等某些设备上停止工作。我在 ion-content 中使用了一个简单的 html 视频标签，视频在网络上（不是本地的）。我还可以使用最新的 SDK 更新在模拟器上重现该行为。

我什至用 ionic 3 开始了一个新的空白项目，在 home.html 文件中添加了一个视频标签，但遇到了同样的问题。在 Android 设备或模拟器上部署时会出现问题（API 23 到 25 个最新更新）。它在 iOS 上运行良好。实际上我们可以听到声音，但是视频没有呈现在屏幕上。

<ion-content overflow-scroll="true">
  <video controls="controls" preload="metadata" webkit-playsinline="webkit-playsinline">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" />
  </video>
</ion-content>

我阅读了很多关于类似问题的帖子，但似乎没有人有适合我的解决方案或使用不同的技术。我尝试过的解决方案包括：

确保 hardwareAccelerated 在 Android 清单中设置为 true。
将 overflow-scroll="true" 添加到部分。
已将 type="video/mp4" 删除到视频源标签。
确保 mp4 文件使用支持的编码 (H.264)
尝试了不同的 ionic/cordova CLI 和核心版本
已更新 Android 个 SDK

昨天我很幸运地发现在设备上的设置/开发工具中启用多进程 WebView 可以使视频再次工作，但这不是我们客户的选项。所以它与 WebView 和最新的 Android 更新（10 月）有关，但我不知道是什么，也绝对不知道如何修复它。

这是我使用的代码：Ionic Video Problem / StackBlitz

但正如我所说，它在浏览器中运行良好，您必须下载、编译并将其发送到 Android 设备才能看到问题。

我已经为此苦苦挣扎了一个星期。有什么想法吗？

Answer 1

有些人在 Android 上遇到了这个问题，如果他们没有安装 crosswalk。

这有助于使您的 Chrome 版本与多种 Android 版本和设备兼容。

Answer 2

这似乎是制造商的问题，因为我们的大多数用户在应用特定更新后最近都消失了。问题出现在 Samsung S7 运行 Android 7.0 上。在更新之前，我们可以通过在设置中启用多进程 WebView 作为解决方法来临时修复错误。

Answer 3

<ion-content overflow-scroll="true">
  <video controls="controls" preload="metadata" webkit-playsinline="webkit-playsinline">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" />
  </video>
</ion-content>

HTML5 ionic 项目中的视频标签在 android 设备上不工作

HTML5 video tag in ionic project not working on android device

android

uiwebview

html5-video

cordova

ionic-framework