In this code you can use multiple button to play an video as per time frame according to button.
on click on button you can jump to the define time of that button and so on.
I hope it will be helpful for you.
Example :
Here is the Code :
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ritu Video</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="col-lg-12">
<video id="myVideo" width="100%" controls autoplay loop>
<source src="js/video/ATELIER_movie_02.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
<source src="js/video/ATELIER_movie_02.webm" type="video/webm">
Your browser does not support HTML5 video. </video>
</div>
<div class="col-lg-12">
<div class="col-lg-2"> <div id="button" class="button-s">10 Sec Clip</div></div>
<div class="col-lg-2"> <div id="button2" class="button-s">20 Sec Clip</div></div>
<div class="col-lg-2"> <div id="button3" class="button-s">30 Sec Clip</div></div>
<div class="col-lg-2"> <div id="button4" class="button-s">40 Sec Clip</div></div>
<div class="col-lg-2"> <div id="button5" class="button-s">50 Sec Clip</div></div>
<div class="col-lg-2"> <div id="button6" class="button-s">60 Sec Clip</div></div>
</div></div>
<script>
var vid = document.getElementById("myVideo");
$(document).ready(function(){
vid.autoplay = true;
vid.load();
$('#button').click(function(){
//var myVideo = document.getElementById("myVideo");
//alert('ritu');
vid.autoplay = true;
vid.currentTime=10;// here is the timing
});
$('#button2').click(function(){
//var myVideo = document.getElementById("myVideo");
//alert('ritu');
vid.autoplay = true;
vid.currentTime=20;// here is the timing
});
$('#button3').click(function(){
//var myVideo = document.getElementById("myVideo");
//alert('ritu');
vid.autoplay = true;
vid.currentTime=30;
});
$('#button4').click(function(){
//var myVideo = document.getElementById("myVideo");
//alert('ritu');
vid.autoplay = true;
vid.currentTime=40;// here is the timing
});
$('#button5').click(function(){
//var myVideo = document.getElementById("myVideo");
//alert('ritu');
vid.autoplay = true;
vid.currentTime=50;// here is the timing
});
$('#button6').click(function(){
//var myVideo = document.getElementById("myVideo");
//alert('ritu');
vid.autoplay = true;
vid.currentTime=60;// here is the timing
});
});
// below function is for autoplay a video
$(document).ready(function() {
});
/*function enableAutoplay() {
vid.autoplay = true;
vid.load();
}*/
/*function disableAutoplay() {
vid.autoplay = false;
vid.load();
}
function checkAutoplay() {
alert(vid.autoplay);
} */
</script>
</body>
</html>
Style.css
.button-s{
margin: 0px auto;
font-weight: bold;
text-align: center;
cursor: pointer;
color: #fff;
background: rgb(115, 115, 115);
border-radius: 5px;
box-shadow: 0px 2px 3px #0DA6F6;
}
