Skip to content Skip to sidebar Skip to footer

In HTML5 Video , How To Play A Small Clip From A Long Video?

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

Solution 1:

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.


Solution 2:

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


Post a Comment for "In HTML5 Video , How To Play A Small Clip From A Long Video?"