Problem streaming video using media source extensions

问题

I seem to have a very strange problem. I am trying to play a video which is being streamed live using a web browser. For this, I am looking at the MediaSource object. I have got it in a way so that the video is taken from a server in chunks to be played. The problem is that the first chunk plays correctly then playback stops.

To make this even more strange, if I put the computer to sleep after starting streaming, then wake it up andthe video will play as expected.

Some Notes:

I am currently using chrome.

I have tried both of them ,with and without calling MediaSource's 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;
};

回答1:

You are making two big mistakes:

You can only call sbx.appendBuffer when sbx.updating property is false, otherwise appendBuffer will fail. So what you need to do in reality is have a queue of chunks, and add a chunk to the queue if sbx.updating is true:
```
if (sbx.updating || segmentsQueue.length > 0)
    segmentsQueue.push(e.result);
else
    sbx.appendBuffer(e.result);
```

Your code explicitly says to stop playing after the very first chunk:

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

Here is what you really need to do:

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

来源：https://stackoverflow.com/questions/53844122/problem-streaming-video-using-media-source-extensions

标签

javascript

html

media-player