Воспроизведение видео из файловой системы Chrome не работает на Android
Я пытаюсь создать автономный видеоплеер, который будет загружать видеоконтент с моего сайта для последующего просмотра в автономном режиме с помощью видеоэлемента HTML5. Приведенный ниже код отлично работает в Chrome для настольных компьютеров, но не на мобильных устройствах (Смартфон Nexus S, планшет Nexus 7, 4.1, поскольку только он запускает Chrome, который требуется для API файловой системы ). Я использую API файловой системы, который поддерживается Chrome как на рабочем столе, так и на мобильных устройствах.
Я подтвердил, что он правильно сохраняет файл на мобильном устройстве, и я могу правильно получить файл, но по какой-то причине после извлечения видео из локальной системы хром не хочет воспроизводить видео. Это верно независимо от того, использую ли я элемент видео html5 или перехожу непосредственно к URL-адресу файловой системы. Когда я использую элемент видео html5, он возвращает ошибку media _err _, не поддерживаемую _.Я подтвердил, что устройство может воспроизводить видео, если я перейду непосредственно к нему на своем сервере (без предварительного сохранения его с помощью API файловой системы ), поэтому проблема не в кодеке или формате видео. Я также использую тип mime video/mp4 в обоих случаях.
Опять же, это работает на компьютере, но не на мобильном устройстве. Любые идеи?
Вот код, который мы используем:
<!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>