[lnkForumImage]
TotalShareware - Download Free Software

Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

How to add custom seekbar in html5 video

pradeeplandge1

4/9/2016 7:30:00 PM

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

Andrew Poulos

4/10/2016 7:17:00 AM

0

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

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