Video Player not Working HTML5

+4 Jazib Bashir · December 24, 2014
My video Player is not working:

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="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>

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.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);


Post a Reply

Replies

Oldest  Newest  Rating
0 paul post · June 25, 2015
I got it!

Place the <script type="text/javascript" src="videoplayer.js"></script>

on the bottom of the page ...... :P
0 paul post · June 25, 2015
Hi, i got the same problem but I can't even get my play button to update text :S

I hope Kaveh will be back soon (A)
+1 Kaveh Greenwood · June 12, 2015
I'm doing a little investigation when I get off work tonight. I'll reply with my results shortly after. 6-8 hours time from when this reply was posted.
0 H M Masum Billah · June 10, 2015
It is not working for me too. Please anyone help us to solve this. 

Thank you..
  • 1

HTML / CSS / Web Design

107,352 followers
About

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

Links
Moderators