Video canplay 事件每秒触发数千次

Question

我的页面 onload 函数中有以下 jQuery 代码：

$("#vid-pages").find("video").on('canplay', function() {
  $(this)[0].currentTime = $(this)[0].duration / 2;
  console.log($(this)[0].currentTime);
});

该容器中只有两个视频，页面上的其他任何地方都没有。当我检查控制台时，它不断被代码块中返回的时间淹没。只触发一次而不是不断触发的解决方案是什么？

Answer 1

当前时间更改时，浏览器需要从缓存或网络加载更多数据。这可以触发canplay事件。并且由于在事件处理程序中设置了时间，您将获得一个永无止境的循环（您可以通过选择视频来查看此处canplay触发的效果，点击播放然后立即跳到中间）。这可能取决于浏览器。

MDN 上的这个页面对相关的canplaythrough声明了以下内容（虽然不完全相同，但有理由相信这也适用于canplay使用 Firefox 的媒体事件页面中所示）：

注意：手动设置 currentTime 最终会在 firefox 中触发 canplaythrough 事件。其他浏览器可能不会触发此事件。

为了避免取消订阅事件，或使用在第二次触发事件时强制退出的标志。

var initialPlay = false;

$("#vid-pages").find("video").on('canplay', function() {
  if (initialPlay) return;
  initialPlay = true;

  $(this)[0].currentTime = $(this)[0].duration / 2;
  console.log($(this)[0].currentTime);
});

要取消订阅，您需要使用非匿名函数。