在PhoneGap/Chrome应用程序中存储离线使用的视频
-
21-12-2019 - |
题
我有简单的视频播放应用程序都是由PhoneGap和Chrome应用程序CLI设置的(都使用Cordova),它们包含一堆简短的教育视频,并且需要作为Android/iOS上的网站和应用程序以供离线使用。
到目前为止,我发现Chrome Apps捆绑文件的总大小不能超过10mb,PhoneGap构建不能超过40mb-因此两者都需要在本地下载和存储文件以供以后使用。视频将需要从WebView浏览器中打开和播放-热点触发JS来更改HTML5视频src。(AppCache和其他HTML5存储对于移动设备来说是不可能的,它们似乎永远无法达到三位数的存储空间)
有没有人有一定的Cordova/PhoneGap/Chrome应用程序API运气,可以在本地存储文件以实现此规范?
任何建议/帮助/指向正确的方向赞赏!
解决方案
您可以在Cordova应用程序中执行此操作(并且很快在Chrome Cordova应用程序中执行此操作)。您需要最新版本的文件(1.0.1)和FileTransfer(0.4.2)插件。
有了这些,你可以使用 FileTransfer.download()
要下载视频,您可以使用File访问文件并创建 <video>
标签来播放视频。
你会想用 .toNativeURL()
在播放文件条目之前的方法。文件插件的最新版本对文件使用自定义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);
});
});
更新资料
使用最新版本的文件插件(1.1.0),您不再需要使用 .toNativeURL()
获取可用作 src
视频的属性。标准 .toURL()
方法将返回这样的URL。
其他提示
以下是使用phonegap filtransfer
下载文件的代码 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中以获取更多USUAGE