Question

我试图连接多个缓冲区，但它没有用，这是我使用的代码：

let socket = io();
let mediaSource = new MediaSource();
let video = document.getElementById("player");
let queue = [];
let sourceBuffer;
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
    sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
    socket.on('broadcast', function (buffer) {
        console.log('new  buffer');
        let uIntArray = new Uint8Array(buffer);
        if (!sourceBuffer.updating) {
            sourceBuffer.appendBuffer(uIntArray);
        } else {
            queue.push(uIntArray);
        }
    })
});

当第一个缓冲区出现时，视频开始播放，但是一旦第二个缓冲区通过socketIO，视频冻结，我就不知道如何添加第二个缓冲区，所以当第一个缓冲区结束时，它会移动到播放第二个喜欢它是一个视频。原谅我可怜的英语

Answer 1

每次追加后，您必须抵消当前SourceBuffer的持续时间：

var duration = 0;

...

(within loop)
sourceBuffer.timestampOffset = duration;
var delta = buffer.duration
duration = duration + delta;

Answer 2

如果你处理的是顺序流，只需设置sourceBuffer.mode = "sequence"，那么timestampOffset会按照添加块的顺序自动增加。

见MDN SourceBuffer mode。

Javascript将多个缓冲区附加到sourceBuffer并将它们作为单个视频播放

2 个答案: