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

Question

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

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

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

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

Answer 1

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