Хранение видео для автономного использования в приложениях PhoneGap/Chrome

У меня есть простые приложения для воспроизведения видео, созданные как PhoneGap, так и Chrome Apps CLI (оба используют Кордову), они содержат кучу коротких образовательных видеороликов и необходимы как для веб-сайта, так и для приложения на Android/iOS для автономного использования.

До сих пор я обнаружил, что общий размер связанного с Chrome Apps файла не может превышать 10 МБ, а сборка PhoneGap не может превышать 40 МБ - поэтому и для загрузки, и для хранения файлов локально для последующего использования. Видео необходимо открыть и воспроизвести в браузере WebView - горячие точки запускают JS, которые меняют видео с HTML5. (AppCache и другое хранилище HTML5 не имеют значения для мобильных устройств, они никогда не смогут достичь трехзначного пространства для хранения)

Кому-то повезло с определенным API-интерфейсом Cordova/PhoneGap/Chrome, который может хранить файлы локально для достижения этой спецификации?

Любые советы/помощь/указания в правильном направлении оцениваются!

Ответ 1

Вы можете сделать это в приложениях Кордовы (и очень скоро в приложениях 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);
    });
});

Update

В последней версии плагина File (1.1.0) вам больше не нужно использовать .toNativeURL() для получения URL-адреса, который можно использовать в качестве атрибута src для видео. Стандартный метод .toURL() вернет такой URL-адрес.

Ответ 2

Вот код для загрузки файла с помощью 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);
}

Вы можете сохранить файлURL в localstorage для дальнейшего использования