将video存储在PhoneGap / Chrome Apps中供离线使用

我有一个由PhoneGap和Chrome Apps CLI(都使用Cordova)设置的简单video播放应用程序,它们包含一大堆短video教育video,在Android / iOS上作为网站和应用程序离线使用。

到目前为止,我发现Chrome Apps捆绑文件的总大小不能超过10mb,而且PhoneGap Build不能超过40mb,因此两者都需要在本地下载和存储文件供以后使用。 这些video需要在WebView浏览器中打开和播放 – 热点触发JS来更改HTML5videosrc。 (AppCache和其他HTML5存储是移动设备的问题,他们似乎从来没有达到三位数的存储空间)

有没有人有运气与某些Cordova / PhoneGap / Chrome应用程序API,可以在本地存储文件来实现这个规范?

任何意见/帮助/指向正确的方向赞赏!

Solutions Collecting From Web of "将video存储在PhoneGap / Chrome Apps中供离线使用"

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

用这些,你可以使用FileTransfer.download()下载video,你可以使用File来访问文件并创build一个<video>标签来播放video。

在播放文件之前,您需要在文件条目上使用.toNativeURL()方法。 File插件的最新版本使用自定义的URLscheme来处理文件,这不幸与HTML <video>标签不兼容。

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

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

这里是使用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中以便进一步使用