Question

我正在尝试使用Media Source Extension API创建媒体播放器。媒体播放器工作得很好，但我无法理解特定的事件。 sourceopen的{{1}} addEventListner在第20行声明。MediaSource将源缓冲区添加到MediaSource，然后附加到源缓冲区。在第21行和第13行，我已经包含了控制台记录。执行网站时，控制台首先输出第13行的控制台日志。从我的角度来看，应首先显示第21行的控制台日志。我相信我无法理解sourceopen事件监听器的工作原理。有人可以解释为什么在第13行之后sourceopen事件监听器被提出要求。谢谢

如果有人无法理解我的问题，请在下面发表评论。

sourceopen

Answer 1

正确的start()函数将是这样的：

function start() {

    // create an object, an instance of the MediaSource
    var mediaSource = new MediaSource;

    // to this `mediaSource` object add an event listener for the `sourceopen` event
    // and run the code inside the function when `sourceopen` happens
    mediaSource.addEventListener('sourceopen', function () {
        console.log('1');
        var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
        fetchAB(assetURL, function (buf) {
            sourceBuffer.appendBuffer(buf);
        });
    });

    // hey, `video` element, here is the source of the media I'd like you to play
    // it's not a simple url, is something more complex
    // , a `MediaSource` kind of thing
    // and it might take you some time to be ready        
    video.src = URL.createObjectURL(mediaSource);

}

现在，回到整个代码......，如果你告诉浏览器执行这样一行：

console.log('2');

，浏览器没有问题立即执行，您将立即在控制台中看到2。

但是，这件事：

video.src = URL.createObjectURL(mediaSource);

对于浏览器来说并不那么简单。

当您要求浏览器执行此操作时，浏览器会说：＆＃34;好的，您要求我执行，我现在就开始，您可以继续使用其余的代码但是，这个对我来说并不容易......我需要开始转动一些轮子......它会花一些时间......而且，我也不会＃ 39;在我准备好之前，我想出去拍摄视频。我准备好时会告诉你的。

事实上，不是直接我，浏览器，而是mediaSource对象，它是MediaSource的一个实例，是我的一个实例（浏览器＆＃em; >）API，通过提出sourceopen事件让您知道。

所以......，当你把这个代码放在页面上时：

mediaSource.addEventListener('sourceopen', function () { // do things });

你告诉浏览器准备就绪后要做什么，sourceopen已经解雇了。

让我们总结一下：

12| start();

// start() is called and starts to execute but it has something inside that // will take some time before ready // as consequence `console.log('1')` does not happen yet

13| console.log('2');

// runs imediatelly // you see "2" in the console

...一段时间过去了，start()内的代码正在准备好

// the `sourceopen` event fires and a `function ()` // the callback of `mediaSource.addEventListener('sourceopen'` // starts to execute

21| console.log('1');

// gets executed // you see "1" in the console

为什么在脚本结束时执行Sourceopen事件侦听器？

1 个答案: