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

admin管理员组

文章数量:1402793

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.

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.

• javascript
• html
• video

Share Improve this question Follow edited Aug 29, 2016 at 7:04 4dgaurav 11.5k44 gold badges3434 silver badges5959 bronze badges asked Aug 29, 2016 at 6:59 user6768995user6768995 17111 silver badge33 bronze badges 1

• Use stop at 30s mark. Or use external program and cut only 30s of video – Justinas Commented Aug 29, 2016 at 7:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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./video.ogv#t=10,20

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

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

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

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

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

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

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

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/2010/05/sintel/poster.png">

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

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

本文标签： javascriptHow can I Set a end time value to a video played on a browser using HTMLStack Overflow