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

Question

If the user wants to stop the HTML5 media, for example by clicking “pause” native control button, we get "onpause" event. At the same time, if media element reaches the end of the specified fragment, it triggers the same "onpause" event automatically. Is it possible to separate one from another? In JQuery style,

<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>

I tried to make use of "ontimeupdate" event, but refused: I want to react exactly when an automatic pause (caused by reaching the end of a fragment) takes place.

Answer 1

An ended event will only be issued when the complete track has finished. When you play a fragment it will only pause the track at the end of the fragment as the track itself has not ended (unless the end time for the fragment happened to be the end as well).

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.

The ended event will only occur if:

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

To detect if the pause event was triggered due to end of fragment you can compare the currentTime with the fragment end-time (and yes, there is a theoretical chance that you could hit the pause button at exactly this time as well, but this will be as close as you get with the audio element unless the event itself has a secret property revealing the source of pause, of which I am unaware of).

Since we're dealing with floating point values you need to compare the time using an epsilon. Assuming you parse or other wise have a way to get the end-time for the fragment, you can do:

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

This came up for me today when searching for "why does onpause also fire when onended occurs". I wanted to separate the logic between an onpause event and on onended event.

This was my take on it:

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

I have both onpause and onended handlers registered, with onpause running code when it's not at the end of the video.