How can I Set a end time value to a video played on a browser using HTML?

Question

I have a video which is around 50secs in length. I want that only the first 30secs of the video to be played. I have created a HTML code which renders the video on a webpage but it plays all the 50secs. I want only the first 30secs to be played.

Answer 1

Reference MDN

Specifying playback range

When specifying the URI of media for an or element, you can optionally include additional information to specify the portion of the media to play. To do this, append a hash mark ("#") followed by the media fragment description.

A time range is specified using the syntax:

#t=[starttime][,endtime]

The time can be specified as a number of seconds (as a floating-point value) or as an hours/minutes/seconds time separated with colons (such as 2:05:01 for 2 hours, 5 minutes, and 1 second).

A few examples:

http://example.com/video.ogv#t=10,20

Specifies that the video should play the range 10 seconds through 20 seconds.

http://example.com/video.ogv#t=,10.5

Specifies that the video should play from the beginning through 10.5 seconds.

http://example.com/video.ogv#t=,02:00:00

Specifies that the video should play from the beginning through two hours.

http://example.com/video.ogv#t=60

Specifies that the video should start playing at 60 seconds and play through the end of the video.

Answer 2

here's the code that will only play the first maxTime seconds and then pause

var video = document.getElementById("video");
video.play();
var maxTime = 10;
video.addEventListener("progress", function(){
  if(video.currentTime >= maxTime){
    video.pause();  
  }
}, false);

<video id='video'
      preload='none'
      poster="https://media.w3.org/2010/05/sintel/poster.png">

      <source id='mp4'
        src="https://media.w3.org/2010/05/sintel/trailer.mp4"
        type='video/mp4'>
      <source id='webm'
        src="https://media.w3.org/2010/05/sintel/trailer.webm"
        type='video/webm'>
      <source id='ogv'
        src="https://media.w3.org/2010/05/sintel/trailer.ogv"
        type='video/ogg'>

      <p>Your user agent does not support the HTML5 Video element.</p>
</video>