In HTML5 Video , how to play a small clip from a long video?

Asked 23/3, 2012 at 19:43 Answered 6/4, 2023 at 14:6

I would like to show a small clip from a long video file that is over 10 minutes long. This segment of video would start at time offset /seek time of 90 seconds and would have a duration of 45 seconds . How can I do that ?

Jagir answered 23/3, 2012 at 19:43 Comment(1)

Be aware that this way you will be transferring the whole video (which might be rather big in terms of filesize) to your client's device. A user-friendly approach would probably solve this in editing already and supply a specific file that only covers the snippet. – Murdock 27/3, 2012 at 11:21

Phillip Brown is right. you can solve this by controlling yout html-player via js. for example in this case, the video would autostart and will play the videofile should 00:10min to 00:40min

<video id="yourVideoplayer" width="640" height="480" preload="auto"> //preload="auto" buffers the video if initialize. you cannot seek a video which isn t buffering already
  <source src="test.mp4" type="video/mp4" />
  <source src="test.ogv" type="video/ogg" /> 
  This browser is not compatible with HTML 5
</video>

<script type="text/javascript">
   window.onload = playVideoTeaserFrom(10,40);   //this event will call the function after page was loaded

   function playVideoTeaserFrom (startTime, endTime) {
       var videoplayer = document.getElementById("yourVideoplayer");  //get your videoplayer

       videoplayer.currentTime = starttime; //not sure if player seeks to seconds or milliseconds
       videoplayer.play();

       //call function to stop player after given intervall
       var stopVideoAfter = (endTime - startTime) * 1000;  //* 1000, because Timer is in ms
       setTimeout(function(){
           videoplayer.stop();
       }, stopVideoAfter);

   }
 </script>

there might be some bugs in it, but i guess you ll get the point

Jeremy answered 23/3, 2012 at 23:37 Comment(5)

This function doesn't seem to work. Video is normally running full length. – Suicide 29/8, 2014 at 17:24

That's because @longilong set window.onload to undefined, and other problems with the code. There are obvious bugs. – Outfield 16/7, 2015 at 1:23

If the user fast forwards or rewinds with the mouse the timer would stop at a certain time different from the one expect it to. – Cullan 15/10, 2015 at 17:13

This is a bad solution - if the user interacts with the video (pause for example) it will completely distort the TO calculation. to solve this issue you should listen to timeupdate event, and pause the video if vid.currentTime is not between start to end – Capitulum 15/3, 2016 at 18:10

Jim S answer should be marked as correct as it's part of the spec, but I think this answer is a great way to demonstrate programmatic access, so hat off to you! – Parch 24/5, 2016 at 10:3

HTML5 video also supports the Media Fragment URI spec. This will allow you to specify only a segment of the video to play. Using it is fairly trivial:

<source src="video.mp4#t=30,45" type="video/mp4"/>

Will start the video at the 30 second mark and pause the video at the 45 second mark.

Softboiled answered 7/6, 2013 at 20:29 Comment(5)

Just a note that I noticed that Chrome continues to download the rest of the video. It pauses the video at 45 seconds, but a user can resume play from that point. If you're looking at this as a means to limit traffic or to cut off the rest of a video, this is not your solution. – Philcox 23/12, 2014 at 15:45

You'll need to work with the video player controls to prevent this. You could make the video player jump back to 30 seconds into the video if the play button is pressed when the video is at the 45 second mark. It would be pretty trivial to parse the media fragments out of the src to make that kind of functionality. – Softboiled 21/4, 2015 at 16:45

If this is widely supported in all major browsers then it should be the accepted answer. – Scratchboard 7/4, 2016 at 17:34

Browser support should not matter. This is part of a w3c spec that is approved, then it should be the top answer for technical merit. However the JS answer (also depends on browser implementation of DOM & JS); is a great way to show programmatic access to media via HTML5 – Parch 24/5, 2016 at 10:5

Is it possible to have two different segments? so that it plays one and then the other? – Lawsuit 14/6, 2018 at 0:56

Phillip Brown is right. you can solve this by controlling yout html-player via js. for example in this case, the video would autostart and will play the videofile should 00:10min to 00:40min

<video id="yourVideoplayer" width="640" height="480" preload="auto"> //preload="auto" buffers the video if initialize. you cannot seek a video which isn t buffering already
  <source src="test.mp4" type="video/mp4" />
  <source src="test.ogv" type="video/ogg" /> 
  This browser is not compatible with HTML 5
</video>

<script type="text/javascript">
   window.onload = playVideoTeaserFrom(10,40);   //this event will call the function after page was loaded

   function playVideoTeaserFrom (startTime, endTime) {
       var videoplayer = document.getElementById("yourVideoplayer");  //get your videoplayer

       videoplayer.currentTime = starttime; //not sure if player seeks to seconds or milliseconds
       videoplayer.play();

       //call function to stop player after given intervall
       var stopVideoAfter = (endTime - startTime) * 1000;  //* 1000, because Timer is in ms
       setTimeout(function(){
           videoplayer.stop();
       }, stopVideoAfter);

   }
 </script>

there might be some bugs in it, but i guess you ll get the point

Jeremy answered 23/3, 2012 at 23:37 Comment(5)

This function doesn't seem to work. Video is normally running full length. – Suicide 29/8, 2014 at 17:24

That's because @longilong set window.onload to undefined, and other problems with the code. There are obvious bugs. – Outfield 16/7, 2015 at 1:23

If the user fast forwards or rewinds with the mouse the timer would stop at a certain time different from the one expect it to. – Cullan 15/10, 2015 at 17:13

Jim S answer should be marked as correct as it's part of the spec, but I think this answer is a great way to demonstrate programmatic access, so hat off to you! – Parch 24/5, 2016 at 10:3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<video id="myVideo"  controls playsinline muted>
    <source src="https://sample-videos.com/video123/mp4/480/big_buck_bunny_480p_30mb.mp4" type="video/mp4">
</video>

<script>
  
  let vid = document.getElementById("myVideo");
  const delay = ms => new Promise(resolve => setTimeout(resolve,ms));

  async function run(start,end,speed=1){
    vid.playbackRate = speed
    while(true){
        vid.currentTime = start;
        await vid.play()
        await delay((end - start)*1000)
        
        await vid.pause()
    }
  }
  window.onload = run(70,74)
</script>
</body>
</html>

We can use asynchronies function to achieve this. This code is a modified version of @longi code

Earthenware answered 6/4, 2023 at 14:6 Comment(0)

Recommended topics

Hot tags