Almacenamiento de videos para uso sin conexión en aplicaciones PhoneGap/Chrome

Question

Tengo aplicaciones simples de reproducción de video configuradas por PhoneGap y Chrome Apps CLI (ambas usan Cordova), contienen un montón de videos educativos cortos y son necesarias como sitio web y aplicación en Android/iOS para uso sin conexión.

Hasta ahora, he descubierto que el tamaño total del archivo incluido de las aplicaciones de Chrome no puede exceder los 10 MB y el PhoneGap Build no puede exceder los 40 MB, por lo que ambos deberán descargar y almacenar archivos localmente para su uso posterior.Los videos deberán abrirse y reproducirse desde el navegador WebView; los puntos de acceso activan JS que cambian la fuente del video HTML5.(AppCache y otros tipos de almacenamiento HTML5 están fuera de discusión para dispositivos móviles, nunca parecen ser capaces de alcanzar un espacio de almacenamiento de tres dígitos)

¿Alguien ha tenido suerte con cierta API de aplicación Cordova/PhoneGap/Chrome que puede almacenar archivos localmente para lograr esta especificación?

¡Se agradece cualquier consejo/ayuda/señalación en la dirección correcta!

Answer 1

Puedes hacer esto en las aplicaciones de Cordova (y muy pronto en las aplicaciones de Chrome Cordova).Necesitará las versiones más recientes de los complementos File (1.0.1) y FileTransfer (0.4.2).

Con esos, puedes usar FileTransfer.download() para descargar el video, y puede usar Archivo para acceder al archivo y crear un <video> Etiqueta para reproducir el vídeo.

Querrás usar el .toNativeURL() método en las entradas del archivo antes de reproducirlas.Las versiones recientes del complemento Archivo utilizan un esquema de URL personalizado para archivos, que lamentablemente no es compatible con HTML. <video> etiqueta.

Este es el código de prueba que utilizo para probar la interacción de estos métodos:

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

Actualizar

Con la última versión del complemento Archivo (1.1.0), ya no es necesario utilizar .toNativeURL() para obtener una URL que pueda utilizar como src atributo para un vídeo.El estandar .toURL() El método devolverá dicha URL.

Answer 2

Aquí está el código para descargar el archivo usando 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);
}

Puede almacenar el FileURL en LocalStorage para obtener más información