How to add custom seekbar in html5 video

pradeep...@gmail.com

unread,

Apr 9, 2016, 3:29:37 PM4/9/16

to

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.

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

pradeep...@gmail.com

unread,

Apr 9, 2016, 3:30:33 PM4/9/16

to

Andrew Poulos

unread,

Apr 10, 2016, 3:16:43 AM4/10/16

to

On 10/04/2016 5:29 AM, pradeep...@gmail.com wrote:
> 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.

Google is your friend. Try here:
<https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video>

From it I got:

var m = document.getElementById('mediaElementID');

m.seekable.start(0); // Returns the starting time (in seconds)
m.seekable.end(0); // Returns the ending time (in seconds)
m.currentTime = 122; // Seek to 122 seconds
m.played.end(0); // Returns the number of seconds the browser has played

Andrew Poulos

Scott Sauyet

unread,

Apr 10, 2016, 1:04:17 PM4/10/16

to

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.