在 PhoneGap/Chrome 应用程序中存储视频以供离线使用
Posted
技术标签:
【中文标题】在 PhoneGap/Chrome 应用程序中存储视频以供离线使用【英文标题】:Storing video for offline use in PhoneGap/Chrome Apps 【发布时间】:2014-03-29 15:45:43 【问题描述】:我有简单的视频播放应用程序,它们都是由 PhoneGap 和 Chrome Apps CLI(都使用 Cordova)设置的,它们包含一堆简短的教育视频,并且需要作为 android/ios 上的网站和应用程序以供离线使用。
到目前为止,我发现 Chrome 应用程序捆绑文件的总大小不能超过 10mb,PhoneGap Build 不能超过 40mb - 所以两者都需要在本地下载和存储文件以备后用。 视频需要在 WebView 浏览器中打开和播放 - 热点触发 JS 更改 html5 视频 src。 (AppCache 和其他 HTML5 存储对于移动设备来说是不可能的,它们似乎永远无法达到三位数的存储空间)
是否有人对某个可以在本地存储文件以实现此规范的 Cordova/PhoneGap/Chrome 应用 API 感到满意?
感谢任何建议/帮助/指出正确的方向!
【问题讨论】:
当应用程序第一次初始化时,您可以下载视频并将其存储在本地系统使用 phonegap 文件传输 这些文件肯定可以在应用程序中重复使用吗?在离线模式下? 是的,直到时间在你的文件系统中你才能使用它 【参考方案1】:您可以在 Cordova 应用程序中执行此操作(很快在 Chrome Cordova 应用程序中)。您需要最新版本的 File (1.0.1) 和 FileTransfer (0.4.2) 插件。
有了这些,你可以使用FileTransfer.download()
来下载视频,你可以使用File来访问文件并创建一个<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);
);
);
更新
使用最新版本的文件插件 (1.1.0),您不再需要使用 .toNativeURL()
来获取可用作视频的 src
属性的 URL。标准的.toURL()
方法会返回这样一个 URL。
【讨论】:
谢谢哥们。即使与文档相比,这种方法似乎也很有效!也为 toNativeURL 提示 +1 :) 好吧,它忽略了 requestFileSystem 和 download 都可能引发错误的事实,它不会将文件存储在文件系统根目录以外的任何地方,但除此之外它非常完整【参考方案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);
您可以将文件URL存储在本地存储中以供进一步使用
【讨论】:
所以我将 test.html 替换为视频的 URL - 比如google.com/video.mp4 - 并且文件 video.mp4 可以使用吗?我很难让这种方法以这种方式工作。也许我设置不正确 - 我很快就会尝试这种方法。谢谢 非常感谢您的回答,由于这种方法的一些错误,我最终使用了替代方法 - 但是确实使用您的 localStorage 来存储位置并检查文件是否已经下载过! 让我知道错误,以便我可以修复上面的代码测试过的问题 我不确定错误是什么,抱歉,我没有保存它,现在需要通过代码回溯。如果我有时间重新添加该功能,我会告诉你。另外,我一直在使用 Cordova,而不是 PhoneGap - 不确定这是否会产生影响?以上是关于在 PhoneGap/Chrome 应用程序中存储视频以供离线使用的主要内容,如果未能解决你的问题,请参考以下文章
从存储在 NSDictionary 中的 JSON DATA 将应用程序名称存储在 NSArray 中
如何将张量流图像分类数据存储在Android应用程序的内部存储中?
Azure 应用服务 - 无法将日志存储在 Azure 存储中