I've got a simple HTML5 Video Player that is using TimeJump.js (/) to allow for direct jumping to specific time codes.

I.E. Jump to the 25th minute of the video.

I would like to add a limit on the duration of the video played. So, the user can only watch 60 seconds of video at a time. I cannot use the Media URL spec (i.e. #t=25,85) because the beginning of the video will change based on the URL string entered by the user (using TimeJump.js to jump to the point in the video)

Any ideas on how to limit the duration of video played?

thanks.

I've got a simple HTML5 Video Player that is using TimeJump.js (http://davatron5000.github.io/TimeJump/) to allow for direct jumping to specific time codes.

I.E. Jump to the 25th minute of the video.

I would like to add a limit on the duration of the video played. So, the user can only watch 60 seconds of video at a time. I cannot use the Media URL spec (i.e. #t=25,85) because the beginning of the video will change based on the URL string entered by the user (using TimeJump.js to jump to the point in the video)

Any ideas on how to limit the duration of video played?

thanks.

• javascript
• html
• video

1 Answer 1

I never used TimeJump.js but you can listen to the timeupdate event of the media element (audio and video).

var video = document.querySelector('video');

video.addEventListener('timeupdate', function() {
  // don't have set the startTime yet? set it to our currentTime
  if (!this._startTime) this._startTime = this.currentTime;

  var playedTime = this.currentTime - this._startTime;

  if (playedTime >= 10) this.pause();
});

video.addEventListener('seeking', function() {
  // reset the timeStart
  this._startTime = undefined;
});

<video controls="true" height="200" width="300">
  <source type="video/ogg" src="http://media.w3/2010/05/bunny/movie.ogv">
  <source type="video/mp4" src="http://media.w3/2010/05/bunny/movie.mp4">
</video>