如何将多个视频文件附加到源缓冲区

Question

我知道在here之前会问这个问题。但没有答案。

我想将多个视频块附加到sourceBuffer对象中。

我正在获取视频，然后使用appendBuffer(buf)

将其附加到sourceBuffer

但视频长度不会更改为旧视频和新片段的子内容。

第一部分结束后，视频刚刚进行了环聊。

这是我的代码：

var videoNumber = 1;
var video = document.querySelector('video');
var assetURL = '/storage/rooms/';
var segmentDuration = 5;
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/webm;  codecs="vp9, vorbis"';
var sourceBuffer;

if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
    var mediaSource = new MediaSource;
    //console.log(mediaSource.readyState); // closed
    video.src = URL.createObjectURL(mediaSource);
    mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
    console.error('Unsupported MIME type or codec: ', mimeCodec);
}

/**
 * @desc start when video opened
 * @param _
 */
function sourceOpen (_) {
    //console.log(this.readyState); // open
    var mediaSource = this;
    sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
    appendSegment();
    video.addEventListener('timeupdate', checkBuffer);
    // sourceBuffer.addEventListener('updateend', appendSegment);

}

function fetchVideo(videoNumber,callback = function (response) {

}) {
    console.log("fetch video number "+ videoNumber);
    var xhr = new XMLHttpRequest;
    xhr.open('get', assetURL+videoNumber+".webm");
    xhr.responseType = 'arraybuffer';
    xhr.onload = function () {
        callback(xhr.response);
    };
    xhr.send();
}

function appendSegment() {
    fetchVideo(videoNumber,function(buf)
    {
        if(videoNumber === 1)
            video.play();

        sourceBuffer.appendBuffer(buf);
    });
}

function shouldFetchNextSegment () {
    return video.currentTime > (segmentDuration*videoNumber - 1);
}

function checkBuffer (_) {
    if (shouldFetchNextSegment()) {
        console.log("should fetch next");
        console.log('time to fetch next chunk', video.currentTime);
        videoNumber++;
        appendSegment();
    }
}

有什么建议吗？