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

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

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

当一个媒体元素的 paused 属性为 false，readyState 属性为 HAVE_FUTURE_DATA 或 HAVE_ENOUGH_DATA 并且用户代理已经到达媒体资源中的一个点，用户必须为资源做出选择时，就说它已暂停以进行用户交互继续。

只有在以下情况下才会发生结束事件：

在以下情况下，媒体元素被称为已结束播放：

元素的 readyState 属性为 HAVE_METADATA 或更大，并且

任何一个：

• 当前播放位置是媒体资源的结尾，并且
• 播放方向为向前，并且
• 媒体元素没有指定循环属性，或者媒体元素具有当前的媒体控制器。

或者：

• 当前播放位置是最早的可能位置，并且
• 播放方向为倒退。

来源

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

由于我们正在处理浮点值，因此您需要使用 epsilon 来比较时间。 假设您解析或以其他方式获得片段的结束时间，您可以执行以下操作：

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运行代码。