title: How to add custom seekbar in html5 video
body: <p>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.</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
     &lt;div style="text-align:center"&gt;
        &lt;div id="video_player_box"&gt;
           &lt;video id="my_video" width="550" height="300" onclick="playPause(this,'my_video')"&gt;
            &lt;source src="http://media.w3.org/2010/05/sintel/trailer.mp4"&gt;
          &lt;/video&gt;
          &lt;div id="video_controls_bar"&gt;
            &lt;button id="playpausebtn" onclick="playPause(this,'my_video')"&gt;Play&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;p id="demo"&gt;&lt;/p&gt;
      &lt;form id="watch"&gt;
        &lt;p&gt; TIME: &lt;input type="text" id="txt" readonly&gt;&lt;/p&gt;
        &lt;p&gt;COST: &lt;input type="text" id="cost" readonly&gt;&lt;/p&gt;
        As 0.9rs/sec
      &lt;/form&gt;   
  
      &lt;script&gt;
        var str = "Hello World!";
        var result;
        var c = 0;
        var co = 0;
        var t;
        var timer_is_on = 0;
  
        function playPause(btn, vid) {
          var vid = document.getElementById(vid);
          if (vid.paused) {
            vid.play();
            btn.innerHTML = "Pause";
            result = str.fontcolor("green");
            document.getElementById("demo").innerHTML = result;
            if (!timer_is_on) {
              timer_is_on = 1;
              timedCount();
            }
          } else {
            result = str.fontcolor("red");
            document.getElementById("demo").innerHTML = result;
            vid.pause();
            btn.innerHTML = "Play";
            clearTimeout(t);
            timer_is_on = 0;
            myVideo.pause();    
          }
        }
  
        function timedCount() {
          document.getElementById('txt').value = c;
          document.getElementById('cost').value = co;
          c = c + 1;
          co = c * 0.9;
          t = setTimeout("timedCount()", 1000);
          if (vid.ended) {
            clearTimeout(t);
            timer_is_on = 0;
          }
        }
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>