使用JavaScript更新视频进度条

我讨厌JS，而这些信息来自Newboston HTML5

下面的脚本做4件事

-创建变量

-处理暂停和播放按钮

-更新视频进度条

-允许用户查找

它可以很好地处理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';
}
}

---

正在调用更新函数，但未满足“！miniVideo.ended”的条件。miniVideo是您在

seek

中想要的视频标记的id，而不是

e.page

。