視頻可播放事件每秒觸發數千次

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);
});

要取消訂閱，您將需要使用一個非匿名函數。