javascript - Media Source Extensions 中 "update"和 "updateend"事件的区别

Question

谁能解释一下这两个 SourceBuffer 事件之间的区别，以及何时使用其中一个事件？ W3C spec让我感到困惑，因为它读起来像同一件事(“完成”与“结束”):

1. 更新 - 附加或删除已成功完成
2. updateend - 添加或删除已结束。

使用下面的代码进行测试。 Chrome 会触发 error 事件，而 Firefox 不会:

const tests = {
  //  64K of invalid bytes
  'Invalid Bytes': new Int8Array(1024 * 64),

  // valid WebM Opus header bytes (from a random file)
  'Valid Header Bytes': new Uint8Array([26,69,223,163,1,0,0,0,0,0,0,31,66,134,129,1,66,247,129,1,66,242,129,4,66,243,129,8,66,130,132,119,101,98,109,66,135,129,4,66,133,129,2,24,83,128,103,1,0,0,0,0,0,217,18,17,77,155,116,64,29,77,187,139,83,171,132,21,73,169,102,83,172,129,223,77,187,140,83,171,132,22,84,174,107,83,172,130,1,48,236,1,0,0,0,0,0,0,179,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,21,73,169,102,1,0,0,0,0,0,0,69,42,215,177,131,15,66,64,77,128,141,76,97,118,102,53,54,46,52,48,46,49,48,49,87,65,141,76,97,118,102,53,54,46,52,48,46,49,48,49,115,164,144,52,234,234,126,227,12,45,154,239,221,105,21,212,101,42,213,68,137,136,64,184,70,0,0,0,0,0,22,84,174,107,1,0,0,0,0,0,0,98,174,1,0,0,0,0,0,0,89,215,129,1,115,197,129,1,156,129,0,34,181,156,131,117,110,100,134,134,65,95,79,80,85,83,86,170,131,99,46,160,86,187,132,4,196,180,0,131,129,2,225,1,0,0,0,0,0,0,17,159,129,2,181,136,64,231,112,0,0,0,0,0,98,100,129,16,99,162,147,79,112,117,115,72,101,97,100,1,2,56,1,128,187,0,0,0,0,0])
};

(async () => {
  for (let testName of Object.keys(tests)) {
    console.group(testName);
    await testSourceBuffer(tests[testName])
    console.groupEnd();
  };
  console.log('All tests done!');
})()

async function testSourceBuffer(byteArray) {
  return new Promise(resolve => {
    const audio = new Audio();
    const mediaSource = new MediaSource();

    // debug other MediaSource Events
    ['sourceended', 'sourceclose'].forEach(name => {
      mediaSource.addEventListener(name, e => {
        console.log('MediaSource', e.type);
        if (e.type === 'sourceended') {
          resolve();
        }
      })
    })

    mediaSource.onsourceopen = e => {
      console.log('MediaSource', e.type);
      URL.revokeObjectURL(audio.src);
      const sourceBuffer = mediaSource.addSourceBuffer('audio/webm; codecs=opus');

      // debug SoruceBuffer events
      ['abort', 'error', 'update', 'updateend', 'updatestart'].forEach(name => {
        sourceBuffer.addEventListener(name, e => {
          const color = e.type === 'error'? 'color: red' : ''
          console.log(`%cSourceBuffer ${name}`, color);
          if (e.type === 'updateend') {
            if (mediaSource.readyState === 'open') {
              mediaSource.endOfStream();
            }
          }
        })
      })

      sourceBuffer.appendBuffer(byteArray);
    }

    audio.src = URL.createObjectURL(mediaSource)
  });
}

Answer 1

区别在于完成的成功。

update 事件仅在 append或 removal操作确实成功了，而 updateend 在出现 error while appending 时也被触发，或者当操作已经aborted .