Почему прослушиватель событий Sourceopen выполняется в конце сценария?

Правильная функция 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 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