Cordova 3.4 Android Local Video files not playing

Question

I have tried for days now to play a local video file on my galaxy tab 4.2 through a cordova 3.4 app.

When i use an absolute http url the video plays just fine.

Here is what i have tried:

1. I put the video file in the assets/res/raw folder as suggested here: Loading video failed on html5 phonegap

RESULT: After i click on play -> spinning loading icon no video

2. Video in the www folder:

Result: Same as #1

<video id="myvideo" controls="controls" width="400">
    <source src="file:///android_asset/www/gruppenruf.mp4" />
 </video>

Result: Same as #1

I set all the permissions of the folders to 777

Then i tried with the https://github.com/jaeger25/Html5Video plugin

After installing the plugin all i get is: 03-06 18:27:06.953: E/Web Console(22530): Uncaught TypeError: Cannot read property 'html5Video' of undefined:37

All i am trying to do is play a local video file on android. Is this really that complicated?

any help would be appreciated.

Answer 1

Take a look at this post. The File plugin (at least <=v1.3.1) has a bug for android devices. Also, I am not sure if jaeger25/Html5Video plugin is still working with cordova 3.6.x.

A working approach is to programmatically copy your video files from www/gruppenruf.mp4 to a place accessible for playback by the app during runtime. You may use file:///data/data/com.example.MyPackage/files/gruppenruf.mp4 for that. The FileTransfer cordova plugin will take care of this.

var myFilename = "gruppenruf.mp4";
var myUrl = cordova.file.applicationDirectory + "www/" + myFilename;
var fileTransfer = new FileTransfer();
var filePath = cordova.file.dataDirectory + myFilename;

fileTransfer.download(encodeURI(myUrl), filePath, (function(entry) {
  /*
  res = "download complete:\n"
  res += "fullPath: " + entry.fullPath + "\n"
  res += "localURL: " + entry.localURL + "\n"
  alert(res += "nativeURL: " + entry.nativeURL + "\n")
   */
  var vid = document.getElementById("myvideo");
  vid.src = entry.nativeURL;
  //vid.loop = true;
}), (function(error) {
  alert("Video download error: source " + error.source);
  alert("Video download error: target " + error.target);
}), true, {
  headers: {
    Authorization: "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
  }
});

If it does not play you may want to link a click event listener to it or start the video with vid.play();.

Answer 2

If the mentioned options are not working try:

src="android.resource://com.example.hello/raw/Videofile" (leave the extension ".mp4" what so ever)

place your video files in "..\platforms\android\res\raw" note that you don't use the extension of the video file in the src.

I've struggled a lot with this issue, but this worked for me =]

Answer 3

As I spend some time with a similar issue, I feel its worth sharing:

1. If you want to display video fullscreen: dont use html tag as there is a media plugin for that. If you dont need to play offline: the video src pointing to a web server will work just fine.
2. If you need to play offline and the video is part of your app package, have a look to https://github.com/jaeger25/Html5Video (it help to automatically copy the video files in a public location)
3. If you need to play offline videos dynamically downloaded: (my case)
   • Use fileTransfer plugin
   • Save file in cordova.file.externalDataDirectory as its public
   • In some case you may need to force the file to be public
   • you can do that by adding 'file.setReadable(true, false);' to FileTransfer.java line 820

Cheers

Answer 4

Your code stopped working in Cordova 3.4.0 because they changed the file path structure. Instead of 'file:///' you have to use 'cdvfile://'.

Remember to update the File Plugin as well.