CODEWITHSUNDEEP
javascripthtmlcssdom-events
philip
philip

Reputation: 1302

Progress bar for video customized video player

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

Upvotes: 3

Views: 3367

Answers (1)

StackRover
StackRover

Reputation: 587

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

Upvotes: 4

Related Questions