Groups > comp.lang.javascript > #30246 > unrolled thread

How to add custom seekbar in html5 video

Started by	pradeeplandge1@gmail.com
First post	2016-04-09 12:30 -0700
Last post	2016-04-10 17:00 +0000
Articles	2 — 2 participants

Back to article view | Back to comp.lang.javascript

  How to add custom seekbar in html5 video pradeeplandge1@gmail.com - 2016-04-09 12:30 -0700
    Re: How to add custom seekbar in html5 video Scott Sauyet <scott@sauyet.com> - 2016-04-10 17:00 +0000

#30246 — How to add custom seekbar in html5 video

From	pradeeplandge1@gmail.com
Date	2016-04-09 12:30 -0700
Subject	How to add custom seekbar in html5 video
Message-ID	<beaa51f9-ad48-490c-9802-2a489134d306@googlegroups.com>

 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.


<html>
<body>
   <div style="text-align:center">
      <div id="video_player_box">
         <video id="my_video" width="550" height="300" onclick="playPause(this,'my_video')">
          <source src="http://media.w3.org/2010/05/sintel/trailer.mp4">
        </video>
        <div id="video_controls_bar">
          <button id="playpausebtn" onclick="playPause(this,'my_video')">Play</button>
        </div>
      </div>
    </div>
    <p id="demo"></p>
    <form id="watch">
      <p> TIME: <input type="text" id="txt" readonly></p>
      <p>COST: <input type="text" id="cost" readonly></p>
      As 0.9rs/sec
    </form>   

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

</body>
</html>

[toc] | [next] | [standalone]

#30254

From	Scott Sauyet <scott@sauyet.com>
Date	2016-04-10 17:00 +0000
Message-ID	<nee0s3$p9m$2@dont-email.me>
In reply to	#30246

pradeeplandge1 wrote:

> 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.

I want a pony.  I want it to be a bay, with a blaze on its face, no more 
than fourteen hands high, and it should respond well to the bit and your 
leg, but should also be voice commanded.  I just want to ride local 
hunter-jumper shows on my new pony.

[toc] | [prev] | [standalone]

csiph-web

How to add custom seekbar in html5 video

Contents

#30246 — How to add custom seekbar in html5 video

#30254