如何为两个Media Source Extension源对象添加updateend事件监听器？

你只需要按照给video源缓冲区添加监听器的逻辑，同样给audio源缓冲区绑定updateend事件就行。这里有两种清晰的实现方式，你可以根据需求选择：

方式一：和video逻辑保持一致的直接写法 #

这种方式完全复刻你处理video的流程，在audio的XHR回调里先绑定事件，再执行buffer追加：

request_xhr (video_url, function (buffer) { 
  video.addEventListener('updateend', function () { 
    appending_new_sources(); 
  }); 
  video.appendBuffer(buffer); 
});

request_xhr (audio_url, function (buffer) { 
  // 给audio添加updateend事件监听器
  audio.addEventListener('updateend', function () { 
    appending_new_sources(); 
  }); 
  audio.appendBuffer(buffer); 
});

方式二：复用事件处理函数（更推荐） #

如果appending_new_sources()对audio和video的处理逻辑完全相同，建议把事件处理函数抽离出来复用，这样代码更简洁也方便后续维护：

// 抽离共用的事件处理函数
function handleBufferUpdateEnd() {
  appending_new_sources();
}

request_xhr (video_url, function (buffer) { 
  video.addEventListener('updateend', handleBufferUpdateEnd); 
  video.appendBuffer(buffer); 
});

request_xhr (audio_url, function (buffer) { 
  audio.addEventListener('updateend', handleBufferUpdateEnd); 
  audio.appendBuffer(buffer); 
});

另外提一句，如果你之后需要移除这个监听器，复用命名函数会比匿名函数更方便，直接调用audio.removeEventListener('updateend', handleBufferUpdateEnd)就能完成移除操作。

内容的提问来源于stack exchange，提问作者aman