Estoy intentando crear un reproductor de video fuera de línea que descargue contenido de video de mi sitio para verlo luego sin conexión a través de un elemento de video HTML5. El siguiente código funciona bien en Chrome para el escritorio, pero no en el móvil (teléfono inteligente Nexus S, tableta Nexus 7, 4.1, ya que solo funciona con Chrome, que se requiere para la API del sistema de archivos). Estoy usando la API del sistema de archivos que es compatible con Chrome tanto en el escritorio como en el móvil.Reproducción de videos desde el sistema de archivos Chrome no funciona en Android
He confirmado que está almacenando correctamente el archivo en el dispositivo móvil y puedo recuperar el archivo correctamente, pero por alguna razón después de recuperar el video del sistema local Chrome no quiere reproducir el video. Esto es cierto ya sea que esté usando el elemento de video html5 o si estoy navegando directamente a la URL del sistema de archivos. Cuando uso el elemento de video html5, devuelve el error media_err_not_supported. He confirmado que el dispositivo puede reproducir el video si navego directamente a él en mi servidor (sin almacenarlo primero usando la API del sistema de archivos), por lo que el problema no es un problema de códec o de formato de video. También estoy usando el tipo de mime de video/mp4 en ambos casos.
Nuevamente, esto funciona en el escritorio, pero no en el móvil. ¿Algunas ideas?
Este es el código que estamos utilizando:
<!DOCTYPE html >
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript">
var _fs;
var filename = "test3.mp4";
var diskSpaceRequired = 10 * 1024 * 1024;
$(document).ready(function() {
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
function onInitFs(fs) {
_fs = fs;
getVideo(fs);
}
if (!!window.requestFileSystem) {
window.webkitStorageInfo.requestQuota(
window.webkitStorageInfo.PERSISTENT,
diskSpaceRequired, // amount of bytes you need
function() { },
function() {}
);
window.requestFileSystem(window.PERSISTENT, diskSpaceRequired, onInitFs, function() { alert('error'); });
} else {
alert('not supported');
}
$("#play").on('click', playVideo);
$("#ourVideo").on('error', function(e) { console.log('ERROR!!!', e, arguments);
console.log($("#ourVideo")[0].error);
});
});
function playVideo() {
_fs.root.getFile(filename, {}, function (fileEntry) {
$("#ourVideo").attr('src', fileEntry.toURL());
fileEntry.file(function (file) {
var reader = new FileReader();
reader.onloadend = function (e) {
$("#ourVideo").get(0).play();
};
reader.readAsText(file);
}, errorHandler);
}, errorHandler);
}
function getVideo(fs) {
fs.root.getFile(filename, { create: true }, function (fileEntry) {
fileEntry.createWriter(function (fileWriter) {
fetchResource(fileWriter);
}, errorHandler);
}, errorHandler);
}
function errorHandler(e) {
console.log('error', e);
}
function fetchResource(fileWriter) {
console.log('fetchresource');
var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open("GET", "http://mydomain.com/trailer.mp4", true);
xhr.onload = function(e) {
if (this.status == 200) {
var bb = new WebKitBlobBuilder();
bb.append(this.response);
var blob = bb.getBlob("video\/mp4");
fileWriter.write(blob);
} else {
console.log(this.status);
}
};
xhr.send();
}
</script>
<title>foo</title>
</head>
<body>
<input type="button" value="Play Video" id="play"/>
<video id="ourVideo" controls="">
<source id="vidSource" type="video/mp4"/>
</video>
</body>
</html>
¿Cuál es el ruta completa al archivo una vez que se ha descargado? ¿Definitivamente ha podido reproducir el archivo * that *, a diferencia de una copia descargada por separado en otro lugar? –
Cuando se realiza la llamada a fileEntry.toURL() en el código anterior, se devuelve una URL como esta: filesystem: midominio.com/persistent/test3.mp4. Y, sí, si navego directamente a la URL que está descargando desde (midominio.com/trailer.mp4 en el ejemplo anterior) reproduce el video muy bien. –
Vea si puede reproducir el video. Sáquelo del dispositivo y reprodúzcalo o reprodúzcalo desde un reproductor de películas en el dispositivo. –