1

I have a <video> element in a HTML page and looking to record the sections of the video a user plays. I have a “play session” object that contains a start and end timestamp:

class PlaySession {
  constructor(start) {
    this.start = start;
    this.end = null;
  }

  finish(timestamp) {
    this.end = timestamp;
  }
}

When I “finish” the play session, I send the start and end values to an API endpoint for storing. I get the end timestamp by listening for the pause event raised by the video element.

The issue I have comes with seeking. If the video is currently playing and the user clicks elsewhere in the time scrubber, a pause event is raised, but the currentTime on the video is set to where the user clicked.

For example:

  1. User starts watching video.
  2. User watches 5 seconds of video.
  3. User clicks to 30 seconds into video.
  4. pause event is raised, currentTime is 30 instead of expected 5.

There’s also the issue that if a user clicks a previous point in the video, then I’m going to get an end timestamp that’s less than the start timestamp.

When seeking, is there a way to get the currentTime before the seeking occurs?

Martin Bean
  • 38,379
  • 25
  • 128
  • 201
  • annoyingly the `seeking` event seems to have the same issue. Only way I could make something work is tracking the timeUpdated event to keep an independent counter and use that value... shame the events don't fire in a helpful order (Chromium feature request?!) – Offbeatmammal Jun 03 '19 at 23:31

0 Answers0