Video Player not Working HTML5

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


<!DOCTYPE html>
        <title>Video Player</title>
        <link rel="stylesheet" type="text/css" href="videoplayer.css">
        <script type="text/javascript" src="videoplayer.js"></script>
        <section id="skin">
            <video id="myMovie" width="640" height="360">
                <source src="small.mp4">
                <div id="buttons">
                    <button type="button" id="playButton">Play</button>
                <div id="defaultBar">
                    <div id="progressBar"></div>
                <div style="clear:both"></div>


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;


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) {
        updateBar = setInterval(update, 500);
function update() {
    if (!myMovie.ended) {
        var size = parseInt(myMovie.currentTime*barSize/myMovie.duration);'px';
function clickBar(e) {
    if (!myMovie.paused && !myMovie.ended) {
        var mouseX = e.pageX-bar.offsetleft;
        var newtime = mouseX*myMovie.duration/barSize;'px';

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

Post a Reply


Oldest  Newest  Rating
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 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 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)
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
  • 1

HTML / CSS / Web Design


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