问题 存储视频以便在PhoneGap / Chrome应用中离线使用


我有简单的视频播放应用程序,这些应用程序都是由PhoneGap和Chrome Apps CLI设置的(两者都使用Cordova),它们包含一些简短的教育视频,并且需要作为Android / iOS上的网站和应用程序进行离线使用。

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

有没有人幸运使用某种可以在本地存储文件的Cordova / PhoneGap / Chrome App API来实现此规范?

任何建议/帮助/指向正确的方向赞赏!


11511
2018-02-26 16:44


起源

当应用初次初始化时,您可以下载视频并使用phonegap filetransfer存储本地系统 - Divesh Salian
这些文件肯定可以在应用程序中重复使用吗?在离线模式下? - Daniel Sailes
是的,直到你的文件系统,你可以使用它 - Divesh Salian


答案:


您可以在Cordova应用程序中执行此操作(很快就会在Chrome Cordova应用程序中执行此操作)。您需要最新版本的File(1.0.1)和FileTransfer(0.4.2)插件。

有了这些,你可以使用 FileTransfer.download() 下载视频,您可以使用文件访问该文件并创建一个 <video> 标记播放视频。

你会想要使用 .toNativeURL() 播放前对文件条目的方法。最新版本的File插件使用文件的自定义URL方案,遗憾的是它与HTML不兼容 <video> 标签。

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

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() 获取可用作的URL src 视频的属性。标准 .toURL() 方法将返回这样的URL。


10
2018-03-01 03:27



谢啦。即使与简化的文档相比,这种方法似乎也有效!也为toNativeURL提示+1 :) - Daniel Sailes
好吧,它有点忽略了requestFileSystem和下载都可以抛出错误的事实,它不会将文件存储在文件系统根目录的任何地方,但除此之外它还非常完整 - Ian Clelland


这是使用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);
}

您可以将fileURL存储在localstorage中以便进一步使用


1
2018-02-27 10:09



所以我将test.html替换为视频的网址 - 比如说 google.com/video.mp4  - 文件video.mp4可以使用吗?我无法让这种方法以这种方式工作。也许我设置错误 - 我会尽快尝试这种方法。谢谢 - Daniel Sailes
非常感谢答案,由于这个方法有一些错误,我最终使用了替代方案 - 但是确实使用了localStorage存储位置并检查文件是否已经下载过! - Daniel Sailes
让我知道错误,所以我可以修复,因为我测试了上面的代码 - Divesh Salian
我不确定错误是什么对不起,我没有保存它,现在需要回溯代码。如果我有时间添加功能,我会告诉你。此外,我只使用Cordova,而不是PhoneGap - 不确定这是否会产生影响? - Daniel Sailes