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

时间:2018-01-26 19:36:45

标签: javascript

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

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,视频冻结,我就不知道如何添加第二个缓冲区,所以当第一个缓冲区结束时,它会移动到播放第二个喜欢它是一个视频。原谅我可怜的英语

2 个答案:

答案 0 :(得分:0)

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

var duration = 0;

...

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

答案 1 :(得分:0)

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

MDN SourceBuffer mode