如何将updateend事件侦听器添加到两个对象?

时间:2018-05-01 07:26:23

标签: javascript addeventlistener

我的代码(不是完整的脚本,而是问题的必要部分):

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

request_xhr (audio_url, function (buffer)
{
  audio.appendBuffer(buffer);
});

我正在使用Media Source Extension API创建一个视频播放器。我创建了两个名为source buffersvideo的{​​{1}}。在上面的小代码中,我向视频和音频位置发送了两个请求,并将请求附加到audiovideo,并链接到视频播放器。我已将audio Event Listner添加到updateend广告中。 video更新后,事件监听器会打开函数appending_new_sources()。我想在两个缓冲区上添加video,音频和视频。因此,当视频和音频完成更新时,应打开函数updateend。我不知道该怎么做。请帮忙。

1 个答案:

答案 0 :(得分:0)

使用通用处理程序并记住你得到了多少回调;如果你有两个,请拨打appending_new_sources

var callbacks = 0;
function handler() {
    if (++callbacks == 2) {
        appending_new_sources();
    }
}

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

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

但是,这是许多承诺有用的地方之一。如果你给自己一个启用许可的request_xhr版本(可能使用fetch),它可以更清晰:

// Promise-enabled request_xhr:
request_xhr_promise(url, function(buffer)
{
  // You'll need to check for the error condition and use reject if an error occurs
  return new Promise(function(resolve, reject) {
      video.addEventListener('updateend', function() {
        resolve();
      });
      video.appendBuffer(buffer);
  });
});

// Using it for this:
Promise.all([
    request_xhr_promise(video_url),
    request_xhr_promise(audio_url),
])
.then(appending_new_sources)
.catch(function(err) {
    // Handle error
});
相关问题