HTML5 Video Player with Custom Controls using JavaScript

Hi! Today let's see how to build html5 video player with custom controls using javascript. The only way to embed videos on webpages before the introduction of html5 is through the use of add-ons such as flash. But thanks to html5, you can insert video contents using native html markup alone. The <video> </video> element in html5 offers a standard way to include video files on web pages. It is supported by all html5 compatible browsers.

Currently, HTML5 supports three types of video formats and they are MP4, WebM, and Ogg. Among the three, MP4 is compatible with all major browsers.

Creating Video Player in HTML5:

To embed video in an html page, use the <video> element like this,

<video width="640" height="360" controls>
    <source src="videos/flying-seagull.mp4" type="video/mp4">
    <source src="videos/flying-seagull.ogg" type="video/ogg">
    Your browser does not support HTML5 Videos.
</video>

• You can provide multiple video sources using the <source> element. The browser will choose the first supported format.
• The attributes 'width' and 'height' defines the width and height of the video. Providing these values will prevent possible flicker at the time of loading.
• The 'controls' attribute adds the default media controls, such as play, pause, volume slider, fullscreen, etc. to the video player.
• Older versions of browsers doesn't support html5, in which case, the text added between the <video> </video> tags will be displayed.

Autoplay Videos:

The 'autoplay' attribute will start the video automatically. Including it, the video will be played automatically on page load.

<video width="640" height="360" controls autoplay>
    <source src="videos/flying-seagull.mp4" type="video/mp4">
    Your browser does not support HTML5 Videos.
</video>

Building Custom Controls to HTML5 Video Player:

Okay. Now let's build some custom controls to the video player in HTML5. If you wonder why we need custom controls at all when the player itself provide default ones. The primary reason is that the default controls depend entirely on the browser and may vary from one browser to another. Therefore, building a common user interface will make the player look the same across different browsers

HTML5 provides several DOM properties, methods, and events for the <video> element. You can use them to define custom video controls. Below I have created markup for video player with controls to play, pause, replay, stop, volume up/down and mute videos.

HTML Markup:

<div id="container">
    <h1>Custom HTML5 Video Player</h1>
    <div id="player-container">
        <video id="myplayer" width="640" height="360">
            <source src="videos/flying-seagull.mp4" type="video/mp4">
            Your browser does not support HTML5 Video.
        </video>
        <div id="controls">
            <button onclick="playPause()">Play/Pause</button>
            <button onclick="stopVideo()">Stop</button>
            <button onclick="replayVideo()">Replay</button>
            <button onclick="increaseVolume()">Volume (+)</button>
            <button onclick="decreaseVolume()">Volume (-)</button>
            <button onclick="muteVolume()">Mute/Unmute</button>
        </div>
    </div>
</div>

Style the Player with CSS:

Next, add some css styles to make the player look good.

<style type="text/css">
#container {
    margin: 0 auto;
    width: 666px;
    text-align: center;
}

#player-container {
    margin: 0 auto;
    background-color:black;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 3px solid #4CC1BE;
    border-radius: 7px;
}

#controls {
    margin-top: 6px;
}
</style>

The demo uses only simple buttons but, it's up to you to style them with images. Using bootstrap glyphicons or icon fonts like font-awesome is better suited. You can scale them according to your liking.

JavaScript for Custom Controls:

Finally we have to bind the events of the buttons to javascript functions. Below I have added separate js function for each button event.

<script type="text/javascript">
var player = document.getElementById("myplayer");

function playPause() {
    if (player.paused)
        player.play();
    else
        player.pause();
}

function stopVideo() {
    player.pause();
    if (player.currentTime) {
        player.currentTime = 0;
    }
}

function replayVideo() {
    player.currentTime = 0;
      player.play();
}

function increaseVolume() {
    if (player.volume < 1)
        player.volume = parseFloat(player.volume + 0.1).toFixed(1);
}

function decreaseVolume() {
    if (player.volume > 0)
        player.volume = parseFloat(player.volume - 0.1).toFixed(1);
}

function muteVolume() {
    if (player.muted)
        player.muted = false;
    else
        player.muted = true;
}
</script>

That's it. We have everything in place. Now run the file and you can see a nice html5 video player with custom control buttons at the bottom.

Please note that, the demo is just the place to start with. You can build a much more enhanced video player using the DOM properties of HTML5 video element.

Read Also:

• Create Editable Table in HTML5, Bootstrap and jQuery
• Create Fullscreen Video Background with HTML5 and CSS

That explains about building an html5 video player with custom controls. With the help of javascript and some css, you can build a robust video player with an attractive user interface. I hope you like this tutorial. Will meet you in another interesting one. Please don't forget to share this post on your social networks.