存储视频以便在PhoneGap / Chrome应用中离线使用 [英] Storing video for offline use in PhoneGap/Chrome Apps

问题描述

我有简单的视频播放应用程序，由PhoneGap和Chrome应用程序CLI（都使用Cordova）设置，它们包含一堆短的教育视频，需要在Android / iOS的网站和应用程序的离线使用。 p>

我发现，到目前为止，Chrome应用程序捆绑文件的总大小不能超过10mb，PhoneGap构建不能超过40mb - 所以两者都需要下载和存储文件以供以后使用。
视频需要在WebView浏览器中打开和播放 - 热点触发JS更改HTML5视频src。 （AppCache和其他HTML5存储设备是移动设备的问题，他们似乎无法达到三位数存储空间）

任何人都有某个Cordova的运气/ PhoneGap / Chrome App API可以在本地存储文件以实现此规范？

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

解决方案

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

有了这些，你可以使用 FileTransfer.download（）下载视频，您可以使用文件访问该文件并创建< 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。

I have simple video playing apps both set up by PhoneGap and Chrome Apps CLI's (Both use Cordova), they contain a bunch of short educational videos and are needed as both website and application on Android/iOS for offline usage.

I have found, so far, that the total size of the Chrome Apps bundled file can't exceed 10mb and the PhoneGap Build can't exceed 40mb - so both will need to download and store files locally for later use. The videos will need to open and play from within the WebView browser - hotspots trigger JS that change the HTML5 video src. (AppCache and other HTML5 storage are out the question for mobile devices, they never seem to be able to reach triple digit storage space)

Has anyone had luck with a certain Cordova/PhoneGap/Chrome App API that can store files locally to achieve this spec?

Any advice/help/pointing in right direction appreciated!

解决方案

You can do this in Cordova apps (and very soon in Chrome Cordova apps). You'll need the most recent versions of the File (1.0.1) and FileTransfer (0.4.2) plugins.

With those, you can use FileTransfer.download() to download the video, and you can use File to access the file and create a <video> tag to play the video.

You'll want to use the .toNativeURL() method on the file entries before you play them. Recent versions of the File plugin use a custom URL scheme for files, which is unfortunately not compatible with the HTML <video> tag.

This is the test code that I use to test the interaction of these methods:

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);
    });
});

Update

With the latest version of the File plugin (1.1.0), you no longer need to use .toNativeURL() to obtain a URL that you can use as a src attribute for a video. The standard .toURL() method will return such a URL.

这篇关于存储视频以便在PhoneGap / Chrome应用中离线使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！