为什么在脚本末尾执行源open事件侦听器

我正在尝试使用媒体源扩展API来创建媒体播放器。媒体播放器运作完美，但我无法理解特定的事件。MediaSource的sourceopen AddEventListner在第20行中声明。sourceopen将源缓冲区添加到MediaSource，然后将其附加到源缓冲区。在第21和13号线上，我包括了控制台登录。执行网站后，控制台将首先输出第13行的控制台日志。从我的角度来看，应首先显示第21行的控制台日志。我相信我无法理解sourceopen事件侦听器的工作方式。有人可以解释为什么sourceopen事件侦听器在第13行之后被淘汰。谢谢

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

01| <!DOCTYPE html>
02| <html>
03|   <head>
04|     <meta charset="utf-8"/>
05|   </head>
06|   <body>
07|     <video controls></video>
08|     <script>
09|       var video = document.querySelector('video');
10|       var assetURL = 'frag_bunny.mp4';
11|       var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
12|       start();
13|       console.log('2');
14|
15|       function start()
16|       {
17|         var mediaSource = new MediaSource;
18|         video.src = URL.createObjectURL(mediaSource);
19|       
20|         mediaSource.addEventListener('sourceopen', function () {
21|           console.log('1');
22|           var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
23|           fetchAB(assetURL, function (buf)
24|           {
25|             sourceBuffer.appendBuffer(buf);
26|           });
27|         });
28|       } 
29|
30|       function fetchAB (url, cb)
31|       {
32|         var xhr = new XMLHttpRequest;
33|         xhr.open('get', url);
34|         xhr.responseType = 'arraybuffer';
35|         xhr.onload = function ()
36|         {
37|           cb(xhr.response);
38|         };
39|         xhr.send();
40|       };
41|     </script>
42|   </body>
43| </html>

正确的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);

对于浏览器而言并不那么简单。

当您要求浏览器执行此操作时，浏览器有点说："好吧，您要我执行，我现在就开始使用，您可以继续使用该代码的其余部分对我来说这并不容易...，我需要开始旋转一些轮子...，这将花我一些时间...而且，我不想出去拿出视频准备好了。我准备好后会让你知道。

实际上，不是直接我，浏览器，而是mediaSource对象，它是MediaSource的实例，它是我的(浏览器的(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

相关内容

最新更新

热门标签：