首页 文章

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

提问于
浏览
11

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

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

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

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

2 回答

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

    更新

    使用最新版本的File插件(1.1.0),您不再需要使用 .toNativeURL() 来获取可用作视频的 src 属性的URL . 标准的 .toURL() 方法将返回这样的URL .

  • 10

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

相关问题