Question

我似乎有一个非常奇怪的问题。我正在尝试播放正在使用网络浏览器进行实时流式传输的视频。为此，我正在看MediaSource对象。我以某种方式获得了视频，以便从服务器上分批播放视频。问题在于第一个块可以正确播放，然后播放停止。

为了使这一点更加奇怪，如果我在开始流式传输后让计算机进入睡眠状态，然后将其唤醒，视频将按预期播放。

一些注意事项：

我目前正在使用chrome。

无论是否调用MediaSource的endOfStream，我都尝试了这两种方法。

var VF = 'video/webm; codecs="vp8,opus"';
var FC = 0;
alert(MediaSource.isTypeSupported(VF));

var url = window.URL || window.webkitURL;
var VSRC = new MediaSource();
var VURL = URL.createObjectURL(VSRC);
var bgi, idx = 1;
var str, rec, dat = [], datb, brl;
var sbx;

//connect the mediasource to the <video> elment first.
vid2.src = VURL;

VSRC.addEventListener("sourceopen", function () {
    // alert(VSRC.readyState);
    //Setup the source only once.
    if (VSRC.sourceBuffers.length == 0) {
        var sb = VSRC.addSourceBuffer(VF);
        sb.mode = 'sequence';
        sb.addEventListener("updateend", function () {
            VSRC.endOfStream();
        });
        sbx = sb;
    }
});


//This function will be called each time we get more chunks from the stream.
dataavailable = function (e) {
            //video is appended to the sourcebuffer, but does not play in video element
            //Unless the computer is put to sleep then awaken!?
            sbx.appendBuffer(e.result);
            FC += 1;
            //These checks behave as expected.
            len.innerHTML = "" + sbx.buffered.length + "|" + VSRC.duration;
            CTS.innerHTML = FC;
};

Answer 1

您犯了两个大错误：

仅当sbx.updating属性为false时，才可以调用sbx.appendBuffer，否则appendBuffer将失败。因此，实际上，您需要做的是创建一个队列队列，如果sbx.updating为true，则将一个队列添加到队列中：
```
if (sbx.updating || segmentsQueue.length > 0)
    segmentsQueue.push(e.result);
else
    sbx.appendBuffer(e.result);
```

您的代码明确要求在第一个块之后停止播放：

sb.addEventListener("updateend", function () {
    VSRC.endOfStream();
        });

这是您真正需要做的：

sb.addEventListener("updateend", function () {
    if (!sbx.updating && segmentsQueue.length > 0) {
        sbx.appendBuffer(segmentsQueue.shift());
    }
});

使用媒体源扩展流视频问题

1 个答案: