12

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 and application on Android/iOS for offline usage.

I have found, so far, that the total size of the Chrome Apps bundled file can't exceed 10mb and the PhoneGap Build can't exceed 40mb - so both will need to download and store files locally for later use. The videos will need to open and play from within the WebView browser - hotspots trigger JS that change the HTML5 video src. (AppCache and other HTML5 storage are out the question for mobile devices, they never seem to be able to reach triple digit storage space)

Has anyone had luck with a certain Cordova/PhoneGap/Chrome App API that can store files locally to achieve this spec?

Any advice/help/pointing in right direction appreciated!

Daniel Sailes
  • 165
  • 2
  • 10

2 Answers2

11

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 = new FileTransfer();
    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.

Ian Clelland
  • 43,011
  • 8
  • 86
  • 87
  • Thanks man. This method seems to have worked even though compared to documentation it seemed streamlined! +1 for the toNativeURL tip too :) – Daniel Sailes Mar 05 '14 at 14:20
  • Well, it kind of ignores the fact that requestFileSystem and download could both throw errors, and it won't store files anywhere but the filesystem root, but other than that it's pretty complete – Ian Clelland Mar 05 '14 at 16:28
1

Here is the code to download file using phonegap filetransfer

 function downloadFile(){
    window.requestFileSystem(
                 LocalFileSystem.PERSISTENT, 0, 
                 function onFileSystemSuccess(fileSystem) {
                 fileSystem.root.getFile(
                             "test.html", {create: true, exclusive: false}, 
                             function gotFileEntry(fileEntry){
                             var Path = fileEntry.fullPath.replace("test.html","");
                             var fileTransfer = new FileTransfer();
                             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);

}
 function fail(error) {
    console.log(error.target.error.code);
}

You can store the fileURL in localstorage for further usuage

Divesh Salian
  • 1,457
  • 17
  • 30
  • So I replace test.html with the URL of the video - say http://google.com/video.mp4 - and the file video.mp4 will be available for use? I have had trouble getting this method to work in that way. Maybe I had it setup incorrectly - I will try this method shortly. Thanks – Daniel Sailes Feb 27 '14 at 13:34
  • Many thanks for the answer, I ended up using the alternative due to a few errors with this method - however did use your localStorage to store the location and to check whether the file had already been downloaded before! – Daniel Sailes Mar 05 '14 at 15:27
  • Let me know the error so I can fix as I nt tested above code – Divesh Salian Mar 05 '14 at 15:39
  • I'm not sure what the error was sorry, I hadn't saved it and now would require backtracking through the code. If i get time to add the function back in I will let you know. Also, i have only been using Cordova, not PhoneGap - not sure if that would have an effect? – Daniel Sailes Mar 07 '14 at 09:20