HTML5 video player code not working!!!

+3 Apoorv Prasad · March 14, 2015
/* videoplayer.js*/ 

function doFirst() {
    barSize = 600;
    myMovie     = document.getElementById('myMovie');
    playButton  = document.getElementById('playButton');
    bar         = document.getElementById('defaultBar');
    progressBar = document.getElementById('progressBar');

    playButton.addEventListener('click', playButton, false);
    bar.addEventListener('click', clickBar, false);
}
function playButton() {
    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 clickBar(e) {
    if (!myMovie.paused && !myMovie.ended) {
        var mouseX = e.pageX-bar.offsetleft;
        var newtime = mouseX*myMovie.duration/barSize;
        progressBar.style.width=mouseX+'px';
    }
}

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

 /* videoplayer.css */

body {
    text-align: center;
    display: block;
}
#skin {
    width: 700px;
    margin: 10px auto;
    padding: 5px;
    border: 4px solid black;
    border-radius: 10px;
    background-color: #808080;
}
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-color: yellow;
}
#progressBar {
    position: absolute;
    width: 0;
    height: 16px;
    background-color: blue;
}

/*videoplayer.html */

<!DOCTYPE html>
<html>
    <head>
        <title>Video Player</title>
        <link rel="stylesheet" type="text/css" href="videoplayer.css">
        <script type="text/javascript" src="videoplayer.js"></script>
    </head>
    <body>
        <section id="skin">
            <video id="myMovie" width="640" height="360">
                <source src="chris.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>


Post a Reply

Replies

Oldest  Newest  Rating
0 Jimmy Bellmon · May 11, 2015
Are the document.getElementById variables returning null values?
+1 Dinank Vashishth · May 2, 2015
The problem is with the barSize variable, it is declared in a function so it is not available to every function in javascript file, i.e. scope of barSize is local.
To solve it just declare barSize before everything.
Ex.
var barSize=600;
// Then the rest of code.
function dofirst(){....  // the rest of the code
+2 Abdullah Nauman · March 14, 2015
Ok, so what seems to be the error in the inspect element?
  • 1

HTML / CSS / Web Design

107,087 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators