HTML5 视频、MediaSource、appendBuffer、如何跳过一些块答案

【问题标题】：HTML5 Video, MediaSource, appendBuffer, How to skip some chunksHTML5 视频、MediaSource、appendBuffer、如何跳过一些块
【发布时间】：2018-01-16 10:19:27
【问题描述】：

如果跳过一些块，视频元素将无法播放。

HTML：

<div>
    <video id="vdo0" autoplay muted width="300"></video>
    <video id="vdo1" autoplay width="300"></video>
</div>
<div>
    <button id="btnStart">Start</button>
</div>

Javascript：

var vdo0 = document.getElementById('vdo0');
var vdo1 = document.getElementById('vdo1');
var ms = new MediaSource();
var sourceBuffer = null;
var chunks = [];

vdo1.src = URL.createObjectURL(ms);
var i = 0;
var recv = function(){
    var chunk = chunks.shift();
    if(chunk){
        i++;
        if(i < 5 || i > 10){ // HERE, skipped some chunks, vdo1 will cannot play
            sourceBuffer.appendBuffer(chunk);
        }
        recv();
    }else{
        setTimeout(recv, 20);
    }
};

ms.addEventListener('sourceopen', function () {
    sourceBuffer = ms.addSourceBuffer('video/webm;codecs=vp8');
    recv();
}, false);

document.getElementById('btnStart').addEventListener('click', function(){
    navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
    }).then(function (s) {
        vdo0.srcObject = s;
        vdo0.oncanplay = function(){
            var mediaRecorder = new MediaRecorder(s, 'video/webm;codecs=vp8');
            mediaRecorder.ondataavailable = function (e) {
                if (e.data && e.data.size > 0) {
                    var reader = new FileReader();
                    reader.addEventListener("loadend", function () {
                        var arr = new Uint8Array(reader.result);
                        chunks.push(arr);
                    });
                    reader.readAsArrayBuffer(e.data);
                }
            };
            mediaRecorder.start(20);
        };
    }).catch(function (err) {
        A.log('ERROR: ', err);
    });
}, false);

我想做，当跳过一些块时，vdo1 仍然可以播放。 MediaSource 如何接收任何 blob？

如果不将第一个 recorder-blob 推送到块，vdo1 也无法播放。为什么？

怎么办？

谢谢。

【问题讨论】：

标签： javascript html5-video mediarecorder media-source

【解决方案1】：

您不能随意跳过块。解复用器将无法在随机点重新同步。

由于您使用的是 WebM，您可以跳到另一个集群。集群以 0x1F43B675 开头。 https://matroska.org/technical/specs/index.html#Cluster

请注意，要使其正常工作，您的视频在很大程度上要以这样一种方式进行编码，即每个集群都以一个关键帧开始。否则，您的视频将无法继续播放，因为编解码器不会对此感到满意。

【讨论】：