如何区分两个“暂停”事件-单击“暂停”按钮引起的，还是到达媒体片段的结尾引起的？

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

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

当媒体元素的暂停属性为 false，readyState 属性为 HAVE_FUTURE_DATA 或 HAVE_ENOUGH_DATA，并且用户代理已到达媒体资源中的某个点时，用户必须在该点上对资源进行选择，则称媒体元素已暂停以进行用户交互。继续。

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

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

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

任何一个：

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

或者：

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

来源

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

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