I am trying to configure a video player, but I have a progress bar problem when I try to click the progress bar that the video does not go to a specific location.
Here is my html code:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<section id="skin">
<video id="myVideo" width="640" height="360">
<source src="My Google Android.mp4">
</video>
<nav>
<div id="buttons">
<button type="button" id="playButton">Play</button>
</div>
<div id="defaultBar">
<div id="progressBar"></div>
</div>
<div style="clear:both"></div>
</nav>
</section>
</body>
</html>
and here is the javascript code:
function doFirst(){
barSize=600;
myVideo=document.getElementById('myVideo');
playButton=document.getElementById('playButton');
defaultBar=document.getElementById('defaultBar');
progressBar=document.getElementById('progressBar');
playButton.addEventListener('click', playOrPause, false);
defaultBar.addEventListener('click', clickedBar, false);
}
function playOrPause(){
if(!myVideo.paused && !myVideo.ended){
myVideo.pause();
playButton.innerHTML='Play';
window.clearInterval(updateBar);
} else{
myVideo.play();
playButton.innerHTML='Pause';
updateBar=setInterval(update, 500);
}
}
function update(){
if(!myVideo.ended){
var size=parseInt(myVideo.currentTime*barSize/myVideo.duration);
progressBar.style.width=size+'px';
} else{
progressBar.style.width='0px';
playButton.innerHTML='Play';
window.clearInterval(updateBar);
}
}
function clickedBar(e){
if(!myVideo.paused && !myVideo.ended){
var mouseX=e.pageX-bar.offsetLeft;
var newtime=mouseX*myVideo.duration/barSize;
myVideo.currentTime=newtime;
progressBar.style.width=mouseX+'px';
}
}
window.addEventListener('load', doFirst, false);
also css code:
body{
text-align:center;
}
header, section, footer, aside, nav, article, hgroup{
display: block;
}
#skin{
width: 700px;
margin: 10px auto;
padding: 5px;
background: red;
border: 4px solid black;
border-radius: 10px;
}
nav{
margin: 5px 0px;
}
#buttons{
float:left;
width: 70px;
height: 22px;
}
#defaultBar{
position:relative;
float: left;
width: 600px;
height: 16px;
padding: 4px;
border: 2px solid black;
background: yellow;
}
#progressBar{
position: absolute;
width: 0px;
height: 16px;
background: blue;
}
source
share