4

I want to show local videos by HTML5 video tag on phonegap android What is wrong with this html code?:

<video controls width="300" height="300">
 <source src="file:///android_asset/www/data/video.m4v">
 <source src="file:///android_asset/www/data/video.webm">
</video>

It doesn't work, video doesn't play.

Also It doesn't work:

<video controls width="300" height="300"><source src="data/video.m4v"><source src="data/video.webm"></video>

But when I load videos from remote server It works well(I load the same video file from server):

<video controls width="300" height="300">
     <source src="http://192.168.1.140/video.m4v">
     <source src="http://192.168.1.140/video.webm">
</video>

I build it and run on Android.

sinoohe
  • 40,334
  • 3
  • 19
  • 16

3 Answers3

4

I found another way to get the path in android.Put the video inside "res" folder and set video player src as "android.resource://your.package.name/raw/videofilename". Don't put the video extension . In IOS you can put it inside assets folder and access it as "foldername/videoName.mp4". Though it is and old post I hope it will help somebody.

Note: "raw" is the folder name inside "res" folder, I used to keep the video file in Android.

Prasanta Barman
  • 56
  • 5
  • This is not working for me, it says "Failed to load resource" when the video tries to load that url – Abadaba Mar 11 '14 at 20:20
  • In which Platform(Android or IOS) ? can you please show the video src ? Then only I can guess the problem. – Prasanta Barman Mar 12 '14 at 05:38
  • 1
    Android 4.4.2, I'm using that exact same url 'android.resource://your.package.name/raw/videofilename' and it doesn't load. My video is in platforms/android/res/raw/videofilename.mp4 – Abadaba Mar 12 '14 at 19:46
  • 1
    You need to wrote the url depending on your package name. Suppose your package name is "com.example.activity" then you have to write "android.resource://com.example.activity/raw/videofilename". "videofilename" is the name of your video file to be played. – Prasanta Barman Apr 10 '14 at 09:42
0

Is the video file part of your app? If so, your src string is wrong. Base the src as if you were in the root folder of the app. So if you had root (where your index.html file is) then videos then your video file, you would use <source src="videos/video.m4v">

Edit:

Try this:

<video width="320" height="240" controls>
    <source src="data/video.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

Note: m4v, from what I am seeing is not a supported video format. Only mp4, ogg, and webm are supported. Also, add in the "Your browser does not support the video tag." line to see if there is a support issue on your device.

Dom
  • 2,569
  • 1
  • 18
  • 28
0

Create a folder for your application and save the video there. Lets say APP_FOLDER_ is the desired name for that folder; APPLICATION_WORKING_DIR_ is the global reference to root directory and vid is the name of the video:

/*code to create the app's folder*/
var onFileSystemRequestSuccess = function(fs) {
    //success fn create dir
    var onDirCreateSuccess = function(dir) {
        //fs instance pointing to root dir
        APPLICATION_WORKING_DIR_ = dir;
    };
    //fail fn
    var onDirCreateFail = function(err) {
        //manage error
    };
    fs.root.getDirectory(APP_FOLDER_, { create: true, exclusive: false }, onDirCreateSuccess, onDirCreateFail);
};
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemRequestSuccess, function () { });

Then, just point src of video tag to:

/*code to set src of video tag*/
//additional: check if APPLICATION_WORKING_DIR_.fullpath ends with "/" and create the path to video
var str_path = (APPLICATION_WORKING_DIR_.fullPath.toString().endsWith('/') ? APPLICATION_WORKING_DIR_.fullPath : APPLICATION_WORKING_DIR_.fullPath + '/') + vid;
document.getElementById('video_tag_name').src = str_path;

Finally, clicking in the element will begin playing.

Hope this helps.

Puma
  • 126
  • 5