Ionic/Phonegap 不播放 html5 视频，但原生浏览器可以答案

【问题标题】：Ionic/Phonegap does not play html5 video, but native browsers doIonic/Phonegap 不播放 html5 视频，但原生浏览器可以
【发布时间】：2015-09-21 05:24:55
【问题描述】：

我在 android 播放 HTML5 视频时遇到问题。该网页在原生 android 浏览器和三星 Galaxy TAB 3 上的 Chome 中完美运行。但是当我从同一源创建 Ionic/Phonegap 应用程序时，视频无法播放。

播放器渲染得很好，我可以点击播放，但是当我这样做时，什么也没有发生。控制台中也没有可见的错误消息。

这是我正在使用的代码：

<video class="chapter-video" controls="controls" preload="none">
    <source src="content/video1.mp4" type="video/mp4">
</video>

【问题讨论】：

您是否尝试检查 GapDebug 控制台？
您可能需要包含 OGV 和 WebM 源以及 .mp4，以便本机浏览器可以读取正确的视频编解码器

标签： android html cordova html5-video ionic

【解决方案1】：

尝试使用 HTML <iframe> 标记代替 <video> 标记在当前 HTML 中嵌入另一个文档。请看下面的例子：

<div class="item" >      
     <div class="video-container">
        <iframe src="{{ image.video }}" frameborder="0" width="560" height="300"></iframe>
     </div>
</div>

在此处了解 iframe：w3school iframe link

【讨论】：

【解决方案2】：

在您的 Ionic 项目中使用 Crosswalk (Chromium webview) 时，Android 的大多数音频和视频元素问题都不存在。

免责声明：添加 Crosswalk 会增加应用程序的二进制大小。

在将 Crosswalk 添加到您的项目之前进行备份。

ionic browser add crosswalk

【讨论】：

【解决方案3】：

我做了一个简单的 myApp 选项卡项目，并且最难添加本地视频。最终对我有用的只是将“/android_asset/”添加到本地视频的前面。

                <video customvideo>
                    <source src="/android_asset/www/img/small.mp4"/>
                    <!--<source src="../img/small.mp4"/>-->
                </video>

视频的实际路径是注释掉的代码，运行“ionic run android”命令后作为本机应用程序运行的代码未注释。

希望这会有所帮助。

【讨论】：