Не удалось получить MediaSource, работающий с форматом mp4 в chrome
На основе примера здесь
Я скачал файл webm и закодировал его как файл mp4, который будет воспроизводиться локально, но я не могу использовать его в качестве источника мультимедиа.
MP4Box сообщает, что кодек должен бытьavc1.64000d,mp4a.40.2
, но добавление его в исходный буфер не помогло.
Вот демонстрация проблемы (я не ожидаю, что она будет работать в firefox, поскольку расширения источников мультимедиа еще не поддерживаются)
А вот код, который я тестирую:
var FILE,CODEC,mediaSource;
var NUM_CHUNKS = 5;
var video = document.querySelector('video');
window.MediaSource = window.MediaSource || window.WebKitMediaSource;
if (!!!window.MediaSource) {
alert('MediaSource API is not available');
}
function callback() {
var sourceBuffer = mediaSource.addSourceBuffer(CODEC);
GET(FILE, function(uInt8Array) {
var file = new Blob([uInt8Array], {type: 'video/mp4'});
var chunkSize = Math.ceil(file.size / NUM_CHUNKS);
var i = 0;
(function readChunk_(i) {
var reader = new FileReader();
reader.onload = function(e) {
sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
if (i == NUM_CHUNKS - 1) {
mediaSource.endOfStream();
} else {
if (video.paused) {
video.play();
}
readChunk_(++i);
}
};
var startByte = chunkSize * i;
var chunk = file.slice(startByte, startByte + chunkSize);
reader.readAsArrayBuffer(chunk);
})(i);
});
}
function GET(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.send();
xhr.onload = function(e) {
if (xhr.status != 200) {
alert("Unexpected status code " + xhr.status + " for " + url);
return false;
}
callback(new Uint8Array(xhr.response));
};
}
function start(type) {
if (type == 'webm') {
FILE = 'test.webm';
CODEC = 'video/webm; codecs="vorbis,vp8"';
}
if (type == 'mp4') {
FILE = 'test.mp4';
CODEC = 'video/mp4; codecs="avc1.64000d,mp4a.40.2"';
}
mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', callback, false);
mediaSource.addEventListener('webkitsourceopen', callback, false);
mediaSource.addEventListener('webkitsourceended', function(e) {
}, false);
}
1 ответ:
Проблема в вашем файле. Media source extensions требует фрагментированного MP4 с заголовком Moov (movie header box) в начале файла, в вашем случае он помещается последним.
Также должен быть moof (Movie fragment box), предшествующий mdat (media data box). MP4Box способен генерировать DASH-совместимые фрагментированные mp4, но я бы рекомендовал вам использовать их последние выпуски nightly .
MP4Box -dash 1000 -rap -frag-rap test.mp4
Это создаст правильно структурированный фрагментированный файл mp4. с moov, помещенным в начале файла. Каждый фрагмент будет длиться 1 секунду, начиная с ключевого кадра.