By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,404 Members | 2,512 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,404 IT Pros & Developers. It's quick & easy.

How to add custom seekbar in html5 video

P: 1
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
Share this question for a faster answer!
Share on Google+

Post your reply

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