Хранение видео для автономного использования в приложениях 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 для дальнейшего использования