467,219 Members | 1,382 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,219 developers. It's quick & easy.

How to add custom seekbar in html5 video

i am working on webapp. In this webapp i want add a seek bar, volume, current time/total time,play/pause, and a timer (time should start when the video is playing and should pause, video is paused) in this webapp i just want to calculate the total number to sec. video is played by user. thank you in advance.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <body>
  3.    <div style="text-align:center">
  4.       <div id="video_player_box">
  5.          <video id="my_video" width="550" height="300" onclick="playPause(this,'my_video')">
  6.           <source src="http://media.w3.org/2010/05/sintel/trailer.mp4">
  7.         </video>
  8.         <div id="video_controls_bar">
  9.           <button id="playpausebtn" onclick="playPause(this,'my_video')">Play</button>
  10.         </div>
  11.       </div>
  12.     </div>
  13.     <p id="demo"></p>
  14.     <form id="watch">
  15.       <p> TIME: <input type="text" id="txt" readonly></p>
  16.       <p>COST: <input type="text" id="cost" readonly></p>
  17.       As 0.9rs/sec
  18.     </form>   
  19.  
  20.     <script>
  21.       var str = "Hello World!";
  22.       var result;
  23.       var c = 0;
  24.       var co = 0;
  25.       var t;
  26.       var timer_is_on = 0;
  27.  
  28.       function playPause(btn, vid) {
  29.         var vid = document.getElementById(vid);
  30.         if (vid.paused) {
  31.           vid.play();
  32.           btn.innerHTML = "Pause";
  33.           result = str.fontcolor("green");
  34.           document.getElementById("demo").innerHTML = result;
  35.           if (!timer_is_on) {
  36.             timer_is_on = 1;
  37.             timedCount();
  38.           }
  39.         } else {
  40.           result = str.fontcolor("red");
  41.           document.getElementById("demo").innerHTML = result;
  42.           vid.pause();
  43.           btn.innerHTML = "Play";
  44.           clearTimeout(t);
  45.           timer_is_on = 0;
  46.           myVideo.pause();    
  47.         }
  48.       }
  49.  
  50.       function timedCount() {
  51.         document.getElementById('txt').value = c;
  52.         document.getElementById('cost').value = co;
  53.         c = c + 1;
  54.         co = c * 0.9;
  55.         t = setTimeout("timedCount()", 1000);
  56.         if (vid.ended) {
  57.           clearTimeout(t);
  58.           timer_is_on = 0;
  59.         }
  60.       }
  61.     </script>
  62.  
  63. </body>
  64. </html>
  65.  
Apr 9 '16 #1
  • viewed: 1054
Share:

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

By using this site, you agree to our Privacy Policy and Terms of Use.