在 iOs 和 Android 的 PhoneGap/Cordova-app 中播放视频答案

【问题标题】：Playing video in PhoneGap/Cordova-app for iOs and Android在 iOs 和 Android 的 PhoneGap/Cordova-app 中播放视频
【发布时间】：2013-08-29 22:12:44
【问题描述】：

我需要在基于 PhoneGap 2.7 构建的应用中播放视频。是否有可能让 iO 和 Android 都适用 - 涵盖当今大多数 Android 设备？

最好从本地位置播放视频文件，以便视频文件实际上是应用程序的一部分。（其他视频文件可以在播放前下载保存。）

【问题讨论】：

标签： cordova phonegap-plugins

【解决方案1】：

您可以使用HTML5 video tag 在您的应用程序中播放视频。

在 Cordova 应用程序中使用 video 标签时（尤其是在 Android 设备上）有一些怪癖，但它的支持在较新版本的 Cordova 中得到了很大改进，因此请确保您针对的是最新版本。

【讨论】：

【解决方案2】：

我知道这是一个老问题，但它仍然出现在搜索中。

对于在 Cordova 应用程序中播放视频，根据我的研究，目前最好使用的插件是：

https://github.com/nchutchind/cordova-plugin-streaming-media

这会在本机播放器中播放本地或流式视频，可配置，并保持最新。

请注意，HTML5 视频在 Android 版本上确实有奇怪的怪癖，在 iPhone（但不是 iPad）上，无论如何，视频都会自动在原生 iPhone 播放器中播放，这使得 HTML5 视频标签成为恕我直言的糟糕选择，如果你希望在您的应用程序中包含视频。

【讨论】：

【解决方案3】：

还有另一种在 iOS 设备上播放视频的选项。使用cordova-plugin-streaming-media。

这是这个插件与cordova-plugin-file合作播放本地应用程序媒体文件的代码示例。

var path = cordova.file.applicationDirectory + "www/media/video.mp4";
if (cordova.platformId == 'ios') {
    var options = {
        successCallback: function () {
            console.log("Video was closed without error.");
        },
        errorCallback: function (errMsg) {
            console.log("Error! " + errMsg);
        },
        orientation: 'landscape'
    };
    window.plugins.streamingMedia.playVideo(path, options);
}

祝你好运！

【讨论】：

你好，我以前永远不会尝试播放视频。我在 ionic 平台上工作，并为 android 和 iOS 平台创建与视频新闻相关的应用程序。所以我面对的所有视频都来自 Web API，并在我的应用程序 UI 中以多个缩略图呈现。那么您认为哪个视频插件可以很好地满足我的要求。？或者你对此有什么想法？。

【解决方案4】：

你可以使用这个插件

cordova 插件添加https://github.com/ednasgoldfishuk/VideoThumbnail.git

用代码

cordova.plugins.videoPlayer.play("file:///android_asset/www/resources/loading/your_video.mp4");

【讨论】：

【解决方案5】：

在 iOS 上，您可以使用 HTML5 视频标签来播放本地文件，但在 Android 上这是不可能的。

我建议使用 macdonst 的 PhoneGap 的 VideoPlayer 插件

https://github.com/macdonst/VideoPlayer

此外，这里还有一些示例代码，可让您在安装插件后开始使用。

<body onload="javascript:init()">
<div class="app">
    <p><a href="#" onclick="playVideo('https://www.youtube.com/watch?v=gYOLV66XukY')">Play File</a><p/>
</div>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="video.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    app.initialize();

    function init()
    {
        document.addEventListener("deviceready", console.log('ready'), true);
    }

    function playVideo(vidUrl) 
    {
        window.plugins.videoPlayer.play(vidUrl);
    }
</script>

来源： https://gist.github.com/macdonst/1507162

【讨论】：

请查看this