使用JavaScript更新视频进度条

Question

我对JS很感兴趣，这些信息来自TheNewBoston HTML5

以下脚本可以完成4件事

- 创建变量

-handles暂停和播放按钮

更新视频进度条

- 允许用户搜索

它处理1和2井，但在3

时失败

function first(){
alert('First Function is Happening');
var barSize = 500;
var miniVideo = document.getElementById('miniVideo');
var playButton = document.getElementById('playButton');
var defaultBar = document.getElementById('defaultBar');
var progressBar = document.getElementById('progressBar');
playButton.addEventListener('click', playOrPause, false);
defaultBar.addEventListener('click', seek, false);
}

 function playOrPause(){
alert('playOrPause Function is Happening');
if(!miniVideo.paused && !miniVideo.ended){
    miniVideo.pause();
    playButton.innerHTML='Play';
    window.clearInterval(updateBar);
}else{
    miniVideo.play();
    playButton.innerHTML='Pause';
    updateBar=setInterval(update, 100);  
}   
}

function update(){
alert('Update Function is Happening');
if(!miniVideo.ended){
var size=parseInt(miniVideo.currentTime * barSize/miniVideo.duration);
    progressBar.style.width=size + 'px';
    alert('Update Function (1) is Happening');
}else{
    progressBar.style.width='0px';
    playButton.innerHTML='Play';
    window.clearInterval(updateBar);
}
}

    function seek(e){
alert('seek Function is Happening');
if(!miniVideo.paused && !miniVideo.ended){
    var mouseX=e.page-defaultBar.offsetLeft;
    var newTime=mouseX*myMovie.duration/barSize;
    miniVideo.currentTime = newTime;
    progressBar.style.width=mouseX + 'px';
}
}