10

I need to play video in an app that's built on PhoneGap 2.7. Is it possible to make this work for both iOs and Android - covering most of todays Android devices?

Preferably the video file should be played from a local location, so that the video file is actually a part of the app. (And other video files can be downloaded and saved before they are played.)

Publicus
  • 1,550
  • 7
  • 18
  • 33

5 Answers5

10

You can use HTML5 video tag to playback video inside your application.

The video tag had some quirks when used in Cordova application (especially on Android devices), but its support is much improved in newer versions of Cordova, so make sure you're targeting the latest version.

Arun Bertil
  • 4,598
  • 4
  • 33
  • 59
5

I know this is an old question, but it still comes up in searches.

For playing video in a Cordova app the best plugin to use, from my research, at this time, is :

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

This plays local or streaming video's in a native player, is configurable, and is up kept up to date.

Note that HTML5 video does have strange quirks on Android version, and on an iPhone (but not an iPad), the video will automatically play in the native iPhone player anyway, making the HTML5 video tag a poor choice IMHO, if you want to have video in your application.

kris
  • 11,868
  • 9
  • 88
  • 110
3

There's also another option of playing a video on iOS device. Use cordova-plugin-streaming-media.

Here's a code example for this plugin to play a local application media file in cooperation with 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);
}

Good luck!

Lentyai
  • 968
  • 1
  • 10
  • 25
  • hello i will never try to play videos before. i work on ionic platform and create videos news related application for both android and iOS platform. so all videos i am facing form web API's and render in multiple thumbnails in my application UI. so which one you sagest video plugin its working fine for fulfill my requirements or not.? or you have any idea about this?. – KAUSHAL J. SATHWARA Jun 30 '16 at 07:51
2

you can use this plugin

cordova plugin add https://github.com/ednasgoldfishuk/VideoThumbnail.git

with the code

cordova.plugins.videoPlayer.play("file:///android_asset/www/resources/loading/your_video.mp4");
Lokesh G
  • 831
  • 11
  • 19
1

On iOS you can use the HTML5 video tag to play local files but this isn't possible on Android.

I'd recommend use the VideoPlayer plugin for PhoneGap by macdonst

https://github.com/macdonst/VideoPlayer

Also, here is some sample code to get you started once you have the plugin installed.

<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>

Source: https://gist.github.com/macdonst/1507162

mrjohnsly
  • 170
  • 8