Ich versuche, einen Offline-Videoplayer zu erstellen, der Videoinhalte von meiner Website herunterladen und später offline über ein HTML5-Videoelement anzeigen kann. Der folgende Code funktioniert in Chrome für den Desktop, aber nicht auf dem Handy (Nexus S Smartphone, Nexus 7 Tablet, 4.1, da nur Chrome läuft, was für das Dateisystem api benötigt wird). Ich verwende die Dateisystem-API, die von Chrome sowohl auf dem Desktop als auch auf Mobilgeräten unterstützt wird.Wiedergabe von Videos vom Chrome-Dateisystem funktioniert nicht unter Android
Ich habe bestätigt, dass es die Datei korrekt auf dem mobilen Gerät speichert, und ich kann die Datei korrekt abrufen, aber aus irgendeinem Grund nach dem Abrufen des Videos aus dem Localsystem möchte Chrome das Video nicht wiedergeben. Dies gilt unabhängig davon, ob ich das html5-Videoelement verwende oder ob ich direkt zur Dateisystem-URL navigiere. Wenn ich das html5-Videoelement verwende, wird der Fehler media_err_not_supported zurückgegeben. Ich habe bestätigt, dass das Gerät das Video abspielen kann, wenn ich direkt zu diesem auf meinem Server navigiere (ohne es zuerst mit dem Dateisystem-API zu speichern), so dass das Problem kein Codec- oder Videoformatproblem ist. Ich verwende in beiden Fällen auch den Video/MP4-Mime-Typ.
Auch dies funktioniert auf dem Desktop, aber nicht mobil. Irgendwelche Ideen?
Hier ist der Code, den wir verwenden:
<!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>
mit http://video.online-convert.com/convert-to-ogg und setzen ogv Datei in der gleichen Position OGV Was ist der vollständiger Pfad zu der Datei, nachdem sie heruntergeladen wurde? Ist es dir gelungen, * diese * Datei zu spielen, im Gegensatz zu einer separat heruntergeladenen Kopie an anderer Stelle? –
Wenn der Aufruf im obigen Code an fileEntry.toURL() erfolgt, wird eine URL wie folgt zurückgegeben: filesystem: mydomain.com/persistent/test3.mp4. Und, ja, wenn ich direkt zu der URL navigiere, von der es heruntergeladen wird (mydomain.com/trailer.mp4 im obigen Beispiel), spielt es das Video gut ab. –
Sehen Sie, ob Sie das Video abspielen können. Nehmen Sie es entweder vom Gerät und spielen Sie es oder spielen Sie es von einem Film-Player auf dem Gerät. –