Video player seems to function properly with the exception that once the Play button is clicked and goes to Pause state, it remains that way no matter what I do. It returns to Play at end of movie.

.js file:

function doFirst(){
    barSize=600;
    myMovie=document.getElementById('myMovie');
    playButton=document.getElementById('playButton');
    bar=document.getElementById('defaultBar');
    progressBar=document.getElementById('progressBar');
    playButton.addEventListener('click', playOrPause, false);
    bar.addEventListener('click', clickedBar, false);
}

function playOrPause(){
    if(!myMovie.paused && !myMovie.ended){
        myMovie.pause();
        playbutton.innerHTML='Play';
        window.clearInterval(updateBar);
    }else{
        myMovie.play();
        playButton.innerHTML='Pause';
        updateBar=setInterval(update, 500);
        
    }
}

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

function clickedBar(e){
    if(!myMovie.paused && !myMovie.ended){
        var mouseX=e.pageX-bar.offsetLeft;
        var newtime=mouseX*myMovie.duration/barSize;
        myMovie.currentTime=newtime;
        progressBar.style.width=mouseX+'px';
    }
}

window.addEventListener('load',doFirst,false);

.html file:

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="new_28.css">
    <script src="new_28.js"></script>
</head>
<body style="background-color:#8ee5ee;">"
<section id="skin">
    <video id="myMovie" width="640" height="360">
        <source src="http://techslides.com/demos/sample-videos/small.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>

Where have I gone wrong?