Storing Video For Offline Use In Phonegap/chrome Apps

I have simple video playing apps both set up by PhoneGap and Chrome Apps CLI's (Both use Cordova), they contain a bunch of short educational videos and are needed as both website a

Solution 1:

You can do this in Cordova apps (and very soon in Chrome Cordova apps). You'll need the most recent versions of the File (1.0.1) and FileTransfer (0.4.2) plugins.

With those, you can use FileTransfer.download() to download the video, and you can use File to access the file and create a <video> tag to play the video.

You'll want to use the .toNativeURL() method on the file entries before you play them. Recent versions of the File plugin use a custom URL scheme for files, which is unfortunately not compatible with the HTML <video> tag.

This is the test code that I use to test the interaction of these methods:

var filename = "small.mp4";
var videoURL = "http://techslides.com/demos/sample-videos/small.mp4";

requestFileSystem(PERSISTENT, 0, function(fileSystem) {
    var ft = newFileTransfer();
    ft.download(videoURL, fileSystem.root.toURL() + "/" + filename, function(entry) {
        var videoElement = document.createElement('video');
        videoElement.controls = 'controls';
        videoElement.src = entry.toNativeURL();
        document.videoElementById("output").appendChild(imgElement);
    });
});

Update

With the latest version of the File plugin (1.1.0), you no longer need to use .toNativeURL() to obtain a URL that you can use as a src attribute for a video. The standard .toURL() method will return such a URL.

Solution 2:

Here is the code to download file using phonegap filetransfer

functiondownloadFile(){
    window.requestFileSystem(
                 LocalFileSystem.PERSISTENT, 0, 
                 functiononFileSystemSuccess(fileSystem) {
                 fileSystem.root.getFile(
                             "test.html", {create: true, exclusive: false}, 
                             functiongotFileEntry(fileEntry){
                             varPath = fileEntry.fullPath.replace("test.html","");
                             var fileTransfer = newFileTransfer();
                             fileEntry.remove();

                             fileTransfer.download(
                                       yourserverurl,
                                       Path + "yourfilename+extension",
                                       function(theFile) {
                                         window.localStorage.setItem("FilePath", theFile.toURL());
                                         console.log(theFile.toURL());
                                       },
                                       function(error) {
                                         console.log("upload error code: " + error.code);
                                       }
                                       );
                             }, 
                             fail);
                 }, 
                 fail);

}
 functionfail(error) {
    console.log(error.target.error.code);
}

You can store the fileURL in localstorage for further usuage