視頻不能正常工作的進度條

我一直在試圖製作一個自定義的視頻播放器，但是我遇到了進度條的問題，當我嘗試點擊進度條時視頻沒有進入特定位置。視頻不能正常工作的進度條

這裏是我的html代碼：

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

和這裏的JavaScript代碼：

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

也CSS代碼：

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

來源

2012-04-26 philip