javascript - 如何区分两个 "onpause"事件 - 由单击 “pause” 按钮引起，以及由到达媒体片段末尾引起？

Question

如果用户想要停止 HTML5 媒体，例如通过单击“暂停” native 控制按钮，我们会收到“onpause”事件。
同时，如果媒体元素到达指定片段的末尾，它会自动触发相同的“onpause”事件。是否可以将一个与另一个分开？在 JQuery 风格中，

<video id="video1" src="url/video.webm#t=10,20" controls></video>

<script type="text/javascript">
  $(window).load(function () { 
    $('#video1').on("manualpause", function () {
      alert("you paused this media manually!");
    });
    $('#video1').on("fragmentend", function () {
      alert("you've reached the end of the fragment! your media is now paused automatically!");
    });
  });
</script>

我尝试使用“ontimeupdate”事件，但拒绝了:我想在发生自动暂停(由到达片段末尾引起)时做出准确 react 。

Answer 1

仅当完整轨道完成时才会发出结束事件。当您播放片段时，它只会在片段末尾暂停轨道，因为轨道本身尚未结束(除非片段的结束时间也恰好是结束)。

A media element is said to have paused for user interaction when its paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has reached a point in the media resource where the user has to make a selection for the resource to continue.

仅在以下情况下才会发生结束事件:

A media element is said to have ended playback when:

The element's readyState attribute is HAVE_METADATA or greater, and

Either:

• The current playback position is the end of the media resource, and
• The direction of playback is forwards, and
• Either the media element does not have a loop attribute specified, or the media element has a current media controller.

Or:

• The current playback position is the earliest possible position, and
• The direction of playback is backwards.

Source

要检测是否由于片段结束而触发了暂停事件，您可以将 currentTime 与片段结束时间进行比较(是的，理论上您也可以在这个时间点按暂停按钮，但这会尽可能接近音频元素，除非事件本身具有揭示暂停源的 secret 属性，我不知道)。

由于我们正在处理浮点值，因此您需要使用 epsilon 比较时间。假设你 parse或者其他方式有办法获得片段的结束时间，你可以这样做:

function onPauseHandler(e) {
    var fragmentEndTime = ...;   // get/parse end-fragment into this var
    if (isEqual(this.currentTime, fragmentEndTime)) {
      // likely that fragment ended
    }
    else {
      // a manual pause
    }
}

function isEqual(n1, n2) {
   return Math.abs(n1 - n2) < 0.00001
}