Local video files won't play in Cordova Android App

7
votes

I'm building an app in Cordova where the first page of the app contains a video tag set to autoplay. I don't get any 404 errors loading the file... The file just won't play. The video is just black with a 0:00 time length that doesn't change.

The strange thing is I get two network requests in Chrome remote dev tools for the video file: the first shows a (success) status, and the second has a status of (cancelled). I've tried using two different URLs for the file:

file:///android_asset/www/video/nameofmyvideo.mp4 with the video file actually in /www/video/nameofmyvideo.mp4.

and

android.resource://mypackagename/raw/nameofmyvideo with the video file actually in /www/res/raw/nameofmyvideo and /platforms/android/res/raw/nameofmyvideo

I'm running the latest cordova (3.4.1-0.1.0) and testing on a kindle fire running CM-11 (4.4.2).

Here's the the markup I'm using:

<video width="400px" height="300px" autoplay controls>
    <source src="file:///android_asset/www/video/video-test.mp4" type="video/mp4">
</video>

OR

<video width="400px" height="300px" autoplay controls>
    <source src="android.resource://my.package.name/raw/videotest" type="video/mp4">
</video>

Is this an android pathing issue? The app runs fine as-is in iOS. I've also tried using webm, with no success.

edit:

Also it seems that the double network load issue (one success, one cancelled) happens regardless of whether the file can actually load. I loaded the same mp4 file over http hosted on my website and the video played fine (but still showed both requests).

4
androidhtmlvideocordova
What if remove px, as I mentioned? – nicael
Sadly, no. I've tried without px, with percentages, and without explicit width or height. Still no luck. – zigzackattack
From everything I can tell, this appears to be a file permission issue. Remote URLs over HTTP work fine, and plugins that use the android.resource URL to move and access the video file locally return 404s. Am I missing something in my config.xml potentially? – zigzackattack

4 Answers

2
votes

Its not possible to read video from inside assets folder on android, you need to place it somewhere outside app, sdcard or remotely. That's because APK is compressed JAR basically and files in assets needs to be decompressed to work, and Android can't decompress video files from APK.

1
votes

well in case somebody needs it, you may embed below code. I've tried it and it works both in android and ios.

<object CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="100%" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
                                <param name="src" value="{{filename}}">
                                <param name="qtsrc" value="{{filename}}">
                                <param name="autoplay" value="false">
                                <param name="loop" value="false">
                                <param name="controller" value="true">
                                <embed src="{{filename}}" qtsrc="{{filename}}" width="100%" autoplay="true" loop="false" controller="true" pluginspage="http://www.apple.com/quicktime/"></embed>
                            </object>
0
votes

Should be autoplay instead of autoplay="" and controls instead of controls="". And remove px: width="400" height="300"

0
votes

Maybe try to add load on video tag:

<video width="400px" height="300px" autoplay controls onklcik="~videoClicked(this)">
    <source src="file:///android_asset/www/video/video-test.mp4" type="video/mp4">
</video>

  //somewhere in your scripts
  videoClicked function(elem) {
      $(elem).load();
  }