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

Question

如果用户想要停止HTML5媒体，例如通过点击“暂停”本机控制按钮，我们得到"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" 事件，但被拒绝了：我想在发生自动暂停（由到达片段末尾引起）时准确地做出反应。

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 与片段结束时间进行比较（是的，理论上您有可能恰好在此时按下暂停按钮，因为好吧，但这将与音频元素一样接近，除非事件本身有一个秘密属性揭示暂停的来源，我不知道这一点）。

由于我们处理的是浮点值，因此您需要使用 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
}

Answer 2

我今天在搜索“为什么 onpause 在 onended 发生时也会触发”时想到了这个问题。我想将 onpause 事件和 onended 事件之间的逻辑分开。

这是我的看法：

videoRef.onpause = (e) => {
  if (e.target.currentTime != e.target.duration) {
    // handleOnPause();
  }
}

我同时注册了 onpause 和 onended 处理程序，当它不在视频结尾时带有 onpause 运行代码。

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

How to distinguish between two "onpause" events - caused by clicking “pause” button, and caused by reaching the end of a media fragment?

javascript

html

html5-video

html5-audio