在PhoneGap/Chrome应用程序中存储供脱机使用的视频

Question

我有一些简单的视频播放应用，都是由PhoneGap和Chrome (都使用Cordova)安装的，它们包含了一堆简短的教育视频，并且需要作为网站和安卓/iOS上的应用程序脱机使用。

到目前为止，我发现Chrome捆绑文件的总大小不能超过10 of，PhoneGap构建不能超过40 of，因此两者都需要在本地下载和存储文件，供以后使用。这些视频需要在WebView浏览器中打开和播放--热点触发了改变HTML5视频src的JS。(对于移动设备来说，AppCache和其他HTML5存储是不可能的，它们似乎永远无法达到三位数的存储空间)

有没有人幸运地使用Cordova/PhoneGap/Chrome在本地存储文件以实现此规范？

任何建议/帮助/指向正确的方向都很感激！

Answer 1

你可以在Cordova应用程序中做到这一点(很快就可以在Cordova应用程序中这样做)。您将需要文件(1.0.1)和FileTransfer (0.4.2)插件的最新版本。

有了这些，您可以使用FileTransfer.download()下载视频，也可以使用File访问文件并创建播放视频的<video>标记。

在播放文件条目之前，您需要对它们使用.toNativeURL()方法。文件插件的最新版本使用了文件的自定义URL方案，不幸的是，它与HTML标记不兼容。

这是我用来测试这些方法的交互的测试代码：

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);
    });
});

更新

使用最新版本的File (1.1.0)，您不再需要使用.toNativeURL()来获取可以用作视频src属性的URL。标准的.toURL()方法将返回这样的URL。

Answer 2

下面是使用phonegap文件传输下载文件的代码

 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);
}

您可以将fileURL存储在本地存储中以供进一步使用。