Sunday 15 February 2015

Embed and Play Video Using HTML5 As Per Desire Time Onclick Multiple Button


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;
  }



No comments:

Post a Comment

Printing first 50 Fibonacci numbers Using PHP Program

Fibonacci series is a series of numbers in which each number is the sum of the two preceding numbers. For example. 0 , 1 , 1 , 2 , 3 , 5...