Play Selected Part of a Video in javaScript

Almost all of us know what is a preview video. Yes, you can play a preview of a video in JavaScript with this tutorial.
You will learn how to play selected part of a video in JavaScript easily.

For example,

Assume that you have a video of duration 04:30 min and you want to play only the first 10 seconds of that video on a webpage. You can do this with this tutorial.



You can even play portion of a video in JavaScript.

Movie Video Trailers And Info PHP Script That Uses TMDB API

HTML5 Video Volume Controller in JavaScript with Slider

Play selected part of a video in JavaScript

Here I am going to play a selected part of a video using JavaScript

My video file name is my_vid.MKV

In the same directory, I have an HTML file index.html

index.html file:

<!DOCTYPE html>
<html>
<head>
  <title>Title Goes Here</title>
  <style type="text/css">
    .center { 
      margin-left: auto;
      margin-right: auto; 
      display: block;
       }
  </style>
</head>
<body>
  <video id="myvideo" width="500px"; class="center" src="my_vid.MKV"></video>

  <button onclick="settime()">Click To Action!</button>
  <script type="text/javascript">
    
    function settime(){
      var video= document.getElementById("myvideo");
      video.currentTime=40;
      video.play();
      console.log(video.currentTime);
      setInterval(function(){
        
        if(video.currentTime>45){
          
          video.pause();
        }
      },1000);
    }

  </script>
</body>
</html>

When the Click To Action Button will be clicked the video will be played. But not from the beginning.
The video will be started from 00:40 min and ended in 00:45 min

if(video.currentTime>45){ 
video.pause();
}

This condition is responsible to pause the video after 00:45 min

Using the setInterval method in every one second the currentTime of the video is being tracked.

HTML5 Video/Audio player Volume Control With Key in JavaScript

3D Photo/Image Gallery (on space) Using HTML5 CSS JS

Free cool 3d image hover effect source code download

 

Play Preview of a video in JavaScript

So, you can understand that using this JavaScript function you can play the preview of any video on a webpage.

You need to set the currentTime to zero and pause the video after a few seconds as per your choice. Here is an example:

function settime(){
      var video= document.getElementById("myvideo");
      video.currentTime=0;
      video.play();
      console.log(video.currentTime);
      setInterval(function(){
        
        if(video.currentTime>15){
          
          video.pause();
        }
      },1000);
    }

This will play the first 15 seconds of your video.

I hope this was useful to you. For any better suggestion or improvements, you can simply write a comment in the below comment section.

You can also read,

Play and pause HTML5 video by pressing space key in JavaScript

Forward and backward HTML5 video player with left and right arrow key in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *