비디오 진행률 표시 줄이 작동하지 않습니다.

사용자 지정 비디오 플레이어를 만들려고했지만 진행률 표시 줄을 클릭하려고 할 때 진행률 막대에 문제가 있습니다. 비디오가 특정 위치로 이동하지 않습니다. 여기 비디오 진행률 표시 줄이 작동하지 않습니다.

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

여기에 자바 스크립트 코드입니다 : 또한

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 코드 : 당신은 당신의 e.pageX를 교체해야

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