-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmain.js
More file actions
50 lines (43 loc) · 1.34 KB
/
main.js
File metadata and controls
50 lines (43 loc) · 1.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
function doFirst(){
// Declaring global variables
barSize=600;
myMovie=document.getElementById('myMovie');
playButton=document.getElementById('playButton');
bar=document.getElementById('defaultBar');
progressBar=document.getElementById('progressBar');
// declaring event listeners
playButton.addEventListener('click', playOrPause, false);
bar.addEventListener('click', clickedBar, false);
}
function playOrPause(){
if(!myMovie.paused && !myMovie.ended){
myMovie.pause();
playButton.innerHTML='Play';
window.clearInterval(updateBar);// stop updating the progress bar
}
else{
myMovie.play();
playButton.innerHTML='Pause';
updateBar=window.setInterval(update, 500);// called evry half a second to update the progress bar
}
}
function update(){
if(!myMovie.ended){
var size=parseInt(myMovie.currentTime*barSize/myMovie.duration);// size of the bar at a particular moment
progressBar.style.width=size+'px';
}
else{
progressBar.style.width='0px'
playButton.innerHTML='Play';
window.clearInterval(updateBar);
}
}
function clickedBar(e){
if(!myMovie.paused && !myMovie.ended){
var mouseX=e.pageX-bar.offsetLeft;// x position of mouse minus that of bar
var newtime=mouseX*myMovie.duration/barSize;
myMovie.currentTime=newtime;
progressBar.style.width=mouseX+'px';
}
}
window.addEventListener('click',doFirst.false);