Javascript 区别于；更新；及；“更新”；媒体源扩展中的事件

有谁能解释这两个

SourceBuffer

事件之间的区别以及何时使用一个事件而不是另一个事件？我很困惑，因为它读起来像是同一件事（“完成”与“结束”）：

更新-追加或删除已成功完成

updateend-追加或删除操作已结束

使用下面的代码进行测试。Chrome会触发

错误

事件，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)
  });
}

---

区别在于完成的成功程度

---

update

事件仅在or操作成功时触发，而

updateend

事件在出现错误或操作失败时也会触发。

看起来Firefox即使发生错误也会触发

update

。请参阅上面的测试代码。可能是个FF臭虫是的那是个FF臭虫。当他们要触发错误事件时，更新不应该像链接规范中指出的那样触发。现在可以测试它，实际上“bug”更多的是他们根本不触发错误事件。例如，如果您强制触发

abort

（通过调用

sourceBuffer.abort（）

），您将看到它们正确地只触发updateend事件（Chrome也会触发错误，并且不会对示例代码进行更新）。