HTML5 Custom Video Progress Bar Issue

Question

Hi,

I'm trying to make my own custom video controls for the video element with vanilla Javascript. I used this tutorial: http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos:

There's a couple of issues: when I click the range slider input for the video progress in Chrome, the video just starts over. And in all browsers that I've tested it on (Chrome, FireFox, IE), the slider doesn't update its position as the video progresses.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="video-container">
        <video id="video" controls>
            <source src="video/video.mp4" type="video/mp4">
            <source src="video/video.ogg" type="video/ogg">
            <track id="entrack" label="English subtitles" kind="captions" src="video/captions.vtt" srclang="en" default>
        </video>
        <div id="video-controls">
            <button type="button" id="play-pause">Play</button>
            <input type="range" id="seek-bar" value="0">
            <button type="button" id="mute">Mute</button>
            <input type="range" id="volume-bar" min="0" max="1" step="0.01" value="1">
            <button type="button" id="full-screen">Full-Screen</button>
        </div>
    </div>
    <div id="captions-container">
        <p>Now that we've looked at the architecture
            of the internet, let's see how you might</p>
        <p>connect your personal devices to
            the internet inside your house.</p>
        <p>Well there are many ways to
            connect to the internet, and</p>
        <p>most often people connect wirelessly.</p>
        <p>Let's look at an example of how
            you can connect to the internet.</p>
        <p>If you live in a city or a town,
            you probably have a coaxial cable for</p>
        <p>cable Internet, or a phone line if you
            have DSL, running to the outside of</p>
        <p>your house, that connects you to
            the Internet Service Provider, or ISP.</p>
        <p>If you live far out in the country,
            you'll more likely have</p>
        <p>a dish outside your house, connecting
            you wirelessly to your closest ISP, or</p>
        <p>you might also use the telephone system.</p>
        <p>Whether a wire comes straight from
            the ISP hookup outside your house, or</p>
        <p>it travels over radio
            waves from your roof,</p>
        <p>the first stop a wire will make once
            inside your house, is at your modem.</p>
        <p>A modem is what connects the internet
            to your network at home.</p>
        <p>A few common residential modems are DSL or</p>
    </div>
    <script src="js/videocontrols.js"></script>
</body>
</html>

window.onload = function() {
    //Video
    var video = document.getElementById("video");

    //Buttons
    var playButton = document.getElementById("play-pause");
    var muteButton = document.getElementById("mute");
    var fullScreenButton = document.getElementById("full-screen");

    // Sliders
    var seekBar = document.getElementById("seek-bar");
    var volumeBar = document.getElementById("volume-bar");


    //Event listener for the play/pause button
    playButton.addEventListener("click", function() {
        if (video.paused == true) {
            //Play video
            video.play();
            //Change button text to "Pause"
            playButton.innerHTML = "Pause"
        } else {
            video.pause();

            playButton.innerHTML = "Play";
        }
    });

    //Event listener for mute button
    muteButton.addEventListener("click", function() {
        if (video.muted == false) {
            video.muted = true;
            muteButton.innerHTML = "Unmute";
        } else {
            video.muted = false;

            muteButton.innerHTML = "Mute";
        }
    });

    // Event listener for the full-screen button
    fullScreenButton.addEventListener("click", function() {
        if (video.requestFullscreen) {
            video.requestFullscreen();
        } else if (video.mozRequestFullScreen) {
            video.mozRequestFullScreen(); // Firefox
        } else if (video.webkitRequestFullscreen) {
            video.webkitRequestFullscreen(); // Chrome and Safari
        }
    });

    //Event listener for the seek bar
    seekBar.addEventListener("change", function() {
        //Calculate new time
        var newTime = video.duration * (seekBar.value / 100);

        video.currentTime = newTime;
    });

    //As video progresses, seekBar moves forward
    seekBar.addEventListener("timeupdate", function() {
        var value = (100 / video.duration) * video.currentTime;
        seekBar.value = value;
    });

    // Pause the video when the slider handle is being dragged
    seekBar.addEventListener("mousedown", function() {
        video.pause();
    });

    // Play the video when the slider handle is dropped
    seekBar.addEventListener("mouseup", function() {
        video.play();
    });

    //Event listener for the volume slider
    volumeBar.addEventListener("change", function() {
        video.volume = volumeBar.value;
    });
}

Welcome to the Treehouse Community

Looking to learn something new?

napoleondevilla

napoleondevilla

HTML5 Custom Video Progress Bar Issue