Progress bar for video customized video player
css, dom-events, html, javascript
Solution
You need to replace your e.pageX-bar.offsetLeft with e.offsetX and this should work. Even before you attempt to change the code, understand the differences between screenX/Y, clientX/Y, pageX/Y and differences between offsetX/Y and pageX/Y
Problem
I've been trying to make a customize video player but I'm having problem with the progress bar, when I try to click the progress bar the video does not go to the 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's 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 the 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; } ```