web-dev-qa-db-ja.com

iOおよびAndroidの場合、PhoneGap / Cordova-appでビデオを再生する

PhoneGap 2.7で構築されたアプリでビデオを再生する必要があります。これをiOとAndroid-今日のほとんどをカバーするAndroidデバイスをカバーする）の両方で機能させることは可能ですか？

ビデオファイルは実際にはアプリの一部となるように、ローカルの場所から再生することをお勧めします。 （他のビデオファイルは、再生する前にダウンロードして保存できます。）

cordovaphonegap-plugins
10
Publicus

HTML5 video tagを使用して、アプリケーション内でビデオを再生できます。

Cordovaアプリケーション（特にAndroidデバイス））で使用する場合、ビデオタグにはいくつかの癖がありますが、新しいバージョンのCordovaではそのサポートが大幅に向上しているため、最新バージョンを対象にしていることを確認してください。

10
Arun Bertil

これは古い質問であることは知っていますが、それでも検索で出てきます。

Cordovaアプリでビデオを再生するために、現時点で私の研究から使用するのに最適なプラグインは次のとおりです。

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

これはネイティブプレーヤーでローカルまたはストリーミングビデオを再生し、構成可能であり、最新の状態に保たれます。

HTML5ビデオにはAndroid=バージョン、およびiPhone（ただしiPadではない））で奇妙な癖があることに注意してください。ビデオはネイティブのiPhoneプレーヤーで自動的に再生され、HTML5ビデオタグはアプリケーションでビデオを使用する場合は、IMHOの選択​​が不適切です。

5
kris

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);
}

幸運を！

3
Lentyai

このプラグインを使用できます

cordovaプラグイン追加 https://github.com/ednasgoldfishuk/VideoThumbnail.git

コード付き

cordova.plugins.videoPlayer.play("file:///Android_asset/www/resources/loading/your_video.mp4");
2
Loki Chandu

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

1
mrjohnsly