Play Selected Part of a Video in javaScript
By Saruque Ahamed MollickAlmost 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