Не удалось получить 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 4

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 секунду, начиная с ключевого кадра.