2

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

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

Community
  • 1
  • 1
wolfmarter
  • 31
  • 1
  • 3
  • You do need a plugin to play video, the one you are using may not be compatible with PhoneGap 3+. You may want to try this instead: https://github.com/dawsonloudon/VideoPlayer – Dawson Loudon Mar 06 '14 at 17:21
  • Check this link. http://stackoverflow.com/questions/19007788/loading-video-failed-on-html5-phonegap/20660189?noredirect=1#comment33991200_20660189 – Prasanta Barman Apr 10 '14 at 09:46
  • @DawsonLoudon I cannot get your plugin working. I'm new to phonegap and I'm not sure how to implement your plugin. I can't figure out where to put the VideoPlayer.java file. – jugg1es Apr 23 '14 at 19:13
  • Are you using the cordova command line to build your project? – Dawson Loudon Apr 23 '14 at 19:30

4 Answers4

2

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();.

Community
  • 1
  • 1
mab
  • 2,658
  • 26
  • 36
1

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

Op_Je_Plaatsman
  • 37
  • 1
  • 8
  • Hi, when I do this, the video play with sound but without image!? (The video works fine when I call it with http) Have you an idea? Permission problem perhaps? What permissions your app have? Thanks a lot. – Sébastien - Vélhost Jul 03 '14 at 08:04
1

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

Renaud S.
  • 11
  • 1
0

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.

James Wong
  • 4,529
  • 4
  • 48
  • 65