CODEWITHSUNDEEP
androidhtmlvideocordova
sinoohe
sinoohe

Reputation: 42542

Loading video failed on html5 phonegap

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.

Upvotes: 4

Views: 5887

Answers (3)

Puma
Puma

Reputation: 136

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.

Upvotes: 0

Prasanta Barman
Prasanta Barman

Reputation: 56

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.

Upvotes: 4

Dom
Dom

Reputation: 2569

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.

Upvotes: 0

Related Questions