Loading video failed on html5 phonegap

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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.