Phonegap Play Video/Phonegap add plugin

Question

I have just started working with phone gap and I am experiencing some issues. As I understand there have been some recent updates to phone gap so some of the info is a bit out dated. I am trying to play an MP4 video stream.

I have tried this on both Windows 7 and Linux Ubuntu Server. Currently I am working with Ubuntu 14.04 Server and Bluestacks Android Emulator on Windows.

I followed the following install guide: http://dasunhegoda.com/installrun-phonegap-ubuntu/797/

I then created my app like so:

cd /root
phonegap create myapp
cd myapp

I have then tried to install the video player using:

phonegap plugin add https://github.com/moust/cordova-plugin-videoplayer.git

This install some directories in the plugins directory.

I have then modified the index.html file of www to the following between the body tags

<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device MY APP</p>
            <p class="event received">Device is Ready MY APP</p>
             <p><a href="#" onclick="playVideo('http://techslides.com/demos/sample-videos/small.mp4')">Play File Now</a><p/>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();

        function playVideo(vidUrl) 
        {
             VideoPlayer.play(
                    vidUrl,
                    {
                        volume: 0.5,
                        //scalingMode: VideoPlayer.SCALING_MODE.SCALE_TO_FIT_WITH_CROPPING
                    },
                    function () {
                        console.log("video completed");
                    },
                    function (err) {
                        console.log(err);
                    }
                );
        }
    </script>
</body>

Whenever I try to click the play video link I can see in the console VideoPlayer not defined. I am accessing the app using the phone gap app on my Bluestack Android emulator. I have however, used jsconsole.com to log issues in the code, so I also have this in the head

<script src="http://jsconsole.com/remote.js?C2624EAC-3434-46D2-A3C5-C57D1C5584C8"></script>

I cannot see further instruction regarding installing the plugin, it seems the one command should be sufficient. Many people mention adding features to the config.xml file. I however do not have /res/xml/config.xml, I only seem to have one config file outside off www in the project root.

Can anyone point me in the right direction?

Update

Full index.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <script src="http://jsconsole.com/remote.js?4AF41FCD-34CB-482B-ADD9-D966BB408076"></script>
   <!-- <script type="text/javascript" src="js/VideoPlayer.js"></script>-->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>
<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
        <p><a href="#" onclick="play_video('http://techslides.com/demos/sample-videos/small.mp4')">Play File Now</a><p/>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <!--<script type="text/javascript" charset="utf-8" src="js/VideoPlayer.js"></script>-->


    <script type="text/javascript">
        app.initialize();

        function init()
        {
            console.log("Trying to show uuid");
            var uuid = device.uuid;

            console.log("UUID is: " + uuid);
            play_video("http://techslides.com/demos/sample-videos/small.mp4");

        }

        function play_video(URL)
        {
           VideoPlayer.play(URL);
        }

    </script>
</body>

Please note that Phonegap is deprecated, you should use Cordova instead. Did you try https://github.com/moust/cordova-plugin-videoplayer? — Oded Regev, Mar 14 '16 at 11:40
@OdedRegev Yes this is the plugin I am trying to use. I have just quickly set up using the same commands but using cordova as opposed to phonegap and the issue remains. — The Humble Rat, Mar 14 '16 at 11:52
@TheHumbleRat Have you tried with plugins i have suggested in my answer. — Jay Rathod, Mar 15 '16 at 07:19

Jay Rathod · Answer 1 · 2016-03-15T12:14:58.420

0

Use this Plugin for Play Video.

Try to install from below git link.

cordova plugin add https://github.com/dawsonloudon/VideoPlayer.git

Then create function for Play Video.

function play_video(URL) {
  if (URL != '') {
    setTimeout(function() {
      window.plugins.videoPlayer.play(URL);
    }, 1000);
  }
}

Call this funciton to your button div.

<p><a href="#" onclick="play_video('http://techslides.com/demos/sample-videos/small.mp4')">Play File Now</a><p/>

Copy JS File from plugin folder to your JS folder.

And modify in your Index.html.

<script src="js/video.js"></script>

For reference you can check below link.

https://github.com/dawsonloudon/VideoPlayer

Edit 1:

Modify your VideoPlayer.js file as below.

cordova.define("cordova/plugin/videoplayer",
  function(require, exports, module) {
    var exec = require("cordova/exec");
    var VideoPlayer = function () {};

    /**
     * Starts the video player intent
     *
     * @param url           The url to play
     */
    VideoPlayer.prototype.play = function(url) {
        exec(null, null, "VideoPlayer", "playVideo", [url]);
    };

    var videoPlayer = new VideoPlayer();
    module.exports = videoPlayer;
});

if (!window.plugins) {
    window.plugins = {};
}
if (!window.plugins.videoPlayer) {
    window.plugins.videoPlayer = cordova.require("cordova/plugin/videoplayer");
}

Edit 2

Modify your Index.html Give it a try.

Add js file before head tag completion as below.

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/VideoPlayer.js"></script>
    <title>Hello World</title>
</head>

And also change play_video function as below.

function play_video(URL) {
  if (URL != '') {
    setTimeout(function() {
      window.plugins.videoPlayer.play(URL);
    }, 1000);
  }
}

It is working for me well in my app.

Hope this will help you.

edited Mar 15 '16 at 12:14

answered Mar 14 '16 at 14:10

Jay Rathod

11,131
6
34
58

I have followed all these steps and I still get VideoPlayer is not defined which is exactly the same as I am getting from my original post. Do you have the full directory I could see as I am not 100 on the structure. – The Humble Rat Mar 15 '16 at 11:34
@TheHumbleRat Have you added js file which is given in plugin as i have mentioned in my post. – Jay Rathod Mar 15 '16 at 11:35
I have copied `/root/phonegap/myapp/plugins/com.dawsonloudon.videoplayer/www/VideoPlayer.js` to `/root/phonegap/myapp/www/js/VideoPlayer.js`. I have then added the `` under cordova.js and index.js calls. – The Humble Rat Mar 15 '16 at 11:38
@TheHumbleRat Check my edited answer replace your JS file and also i have made changes in play video function. – Jay Rathod Mar 15 '16 at 11:53
I have modified /root/phonegap/myapp/www/js/VideoPlayer.js to the file above. I have also put my full index.html in my updated question. Again I am getting not defined. I have managed to add an api plugin, but any other plugin outside of device etc is just not working for me at all. – The Humble Rat Mar 15 '16 at 12:06
@TheHumbleRat Check my edited answer. have you changed play video function in previous change ? as it is looking older one in your edit. – Jay Rathod Mar 15 '16 at 12:15
I have replaced all of the above and now I do not get the not defned message so this is a step forward, however, the actual video never plays. I click the button and see it enter the play_video function as expected, however, nothing happens after this, no player appears, no error appears etc. – The Humble Rat Mar 15 '16 at 13:16
@TheHumbleRat Are you testing in real device or emualtor if so in real device then you need to install any of the media player like VLC etc . .so it will open video in VLC player. – Jay Rathod Mar 15 '16 at 13:21
I have installed in both bluestacks Emulator and on a real device. The video does not show in either and no prompt appears to be play the video with a chosen player. It seems the API plugins work for me but the other do not. – The Humble Rat Mar 15 '16 at 13:35
@TheHumbleRat It seems to be working for me currently in VLC player it is playing video from given url for me. – Jay Rathod Mar 15 '16 at 13:40
What versions of Cordova, Android etc are you using. I have cordova v6 and all the guides etc seem to be for previous versions – The Humble Rat Mar 15 '16 at 14:16

Phonegap Play Video/Phonegap add plugin

1 Answers1