CODEWITHSUNDEEP
htmlhtml5-video
user193116
user193116

Reputation: 3568

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 a duration of 45 seconds . How can I do that ?

Upvotes: 18

Views: 24367

Answers (3)

Devadut S Balan
Devadut S Balan

Reputation: 56

<!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

Upvotes: 0

Jim S.
Jim S.

Reputation: 1160

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.

Upvotes: 55

LONGI
LONGI

Reputation: 11443

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

Upvotes: 14

Related Questions