Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
7th August 2014

Build a responsive HTML5 video player

Discover how to create a fully responsive HTML5 video player that features custom control icons to fit your designs

Build a responsive HTML5 video player

Everyone knows that video is the best way to keep your audience engaged, however, you now want to add some of that video goodness onto your fancy responsive website. You scurry off to YouTube and grab that all-important embed code, lovingly paste it in, only to find that it looks terrible on tablets and phones. Not only that but the controls are all the same boring icons.

Time for a change, in the form of an HTML5 video player that adapts to your responsive site and fits in with your existing UI with some custom controls.

We’ll be basing this tutorial around Bootstrap, for a couple of reasons. The first being that it’s the most popular responsive framework out there, so many people will already be uwsing it; the second reason is that it comes bundled with Glyphicons, which we’ll use to create player controls. You can, of course, create your icons using standard PNG images if you so wish.

Using this technique we will end up with a video that looks consistent, as the standard HTML5 video player is rendered completely different across different browsers using the browsers built-in controls.

DOWNLOAD TUTORIAL FILES

Get set up

Create a new HTML file and add in the following code into the <head> section. This will add the Twitter Bootstrap framework that is required to make your page responsive. If you are already using Bootstrap and are simply integrating into an existing site, you can skip this part of the tutorial.

001    <link rel=”stylesheet” href=”//netdna.
bootstrapcdn.com/bootstrap/3.1.1/css/
bootstrap.min.css”>
002    <script src=”https://ajax.googleapis.
com/ajax/libs/jquery/1.11.0/jquery.min.js”>
</script>
003        <script src=”//netdna.bootstrapcdn.com/
bootstrap/3.1.1/js/bootstrap.min.js”>
</script>

The video container

The below code adds a very basic responsive video container based on the Twitter Bootstrap Jumbotron element. Place this code within the body section of your page; it will render a full-width container at the top of the site. If you are implementing the video player in an existing site you can skip this step.

001    <div class=”jumbotron”>
002        <!--  Begin video content -->
003    </div>

Demonstrate responsiveness

Just to add some context to our site, we’re going to place two responsive columns underneath our jumbotron. These columns have no bearing on the video element, but it will make the final product look more like an actual website. Add this code underneath the previous step above the closing </body> tag.

001    <div class=”container”>
002        <div class=”row”>
003            <div class=”col-md-6”>
004                <h2>Left Col</h2>
005                <p>Donec id […] dui.</p>
006            </div>
007            <div class=”col-md-6”>
008                <h2>Right Col</h2>
009                <p>Donec id […] dui.</p>
010            </div>
011        </div>
012    </div>
013    

Obtain footage

Now we have our code set up, we need an actual video to show. For this we’ll be using a completely open source short animation created by Blender Foundation, ‘Big Buck Bunny’. Download it from the link below in any format you wish – they even have a 4K and 3D version as well as the entire source used to create it.

001    http://bbb3d.renderfarming.net/download.html

Embed video

Now we have our footage we’re going to embed it into the jumbotron using the standard HTML5 markup. Add the following code within the jumbotron <div>, replacing the <!– Begin Video content –> comment. Be sure to look at the output in different browsers to see how the video controls are rendered differently.

001        <video width=”320” height=”240” 
controls>
002            <source src=”big_buck_bunny_1080p_
h264.mp4” type=”video/mp4”>
003            Your browser does not support the 
video tag.
004        </video>

Video formats

Depending on which browser and operating system you are using, the previous step may not have shown any video at all. If this is the case you may need to add the OGG version of the video into your code as well. Grab the OGG file from the video download site and add the following line of code.

001    <source src=”big_buck_bunny_1080p.ogg”
type=”video/ogg”>
002    

Getting responsive

Now it’s time to make use of that large jumbotron area and fill it up with our video. Adjust your video tag height and width to the following, to stretch the video across the jumbotron container. The video will adjust its height accordingly, so the aspect ratio is maintained correctly.

001    <video width=”100%” controls>

Remove spacing

Our jumbotron features grey padding around the video – let’s get rid of that to make our video fill the entire space. Add a CSS block above your video tag with the following code within it. This will override the default Bootstrap CSS, but there is no need for !important tags.

001    <style type=”text/css”>
002        .jumbotron {
003            padding: 0;
004            margin-bottom: 0;
005        }
006    </style>

The poster element

You’ll notice when we first load the page you’re presented with a black video screen. Until you hover over it, it’s not very obvious that it’s a video at all. There are two ways around this, the first is to set the video to autoplay, or we can add the following code to add an intro slide.

001        <video width=”100%” controls         poster=”poster.jpg”>

Removing controls

Now we need to remove the standard HTML5 video player controls. This is easily done by updating the video tag, removing the controls element, as per the below. Keep in mind that while we’re coding the new controls we will be unable to actually play the video.

001    <video width=”100%” poster=”poster.jpg”>

Get video elements

We will be using jQuery in order to add controls back into our player, simply because Bootstrap needs it as well. Add the following code block to the bottom of your page, just above the closing </body> tag. This will cast the video element onto a variable called ‘videoPlayer’ for use later on.

001    <script>
002        $( document ).ready(function() {
003            var videoPlayer = $(‘#videoPlayer’);
004        });
005    </script>

Add an ID

You may have noticed in the previous step, we added a jQuery var that targets the ID of videoPlayer. The next step is for us to add this ID to our video tag to pair things up. Targeting based on ID is good if you have multiple video elements on a page that you want to all behave differently to one another.

001    <video width=”100%” poster=”poster.jpg” id
=”videoPlayer”>

The controls

Now it’s time to add the controls back in, or at least the HTML framework that will power them. This block of HTML adds all the controls in and over the next few steps we will hook them up via jQuery. The controls use the Bootstrap Glyphicons we mentioned previously. Add this under your video tag, within the jumbotron.

001            <div class=”videoControls”>
002            <a href=”#” class=”btnPlay”><span 
class=”glyphicon glyphicon-play”>
</span></a>
003            <div class=”videoTime”>
004                <span class=”current”></span>/<span 
class=”duration”></span>
005            </div>
006            <a href=”#” class=”btnMute”><span 
class=”glyphicon glyphicon-volume-up”>
</span></a>
007            <a href=”#” class=”btnFullscreen”>
<span class=”glyphicon glyphicon-
fullscreen”></span></a>
008        </div>

Hook up play

The first control we’re going to hook up is the play button. This will be a multi-function button that will change from a Play button into a Pause button when activated. Add this code within your script tag, directly underneath your videoPlayer var declaration. Run it in your browser to test it out.

001    $(‘.btnPlay’).click(function() {
002            videoPlayer[0].play();
003        })

Switch the button

Now we can play the video, we can switch the Play control to a Pause when it is active. We’ll do this via an ‘if’ statement that updates the button class, replacing the Play glyphicon with the Pause icon. The ‘if’ statement will also resume playback and switch the icon back. Replace the previous step with the below.

001    $(‘.btnPlay’).click(function() {
002            if(videoPlayer[0].paused) {
003                videoPlayer[0].play();
004                $(‘.glyphicon-play’).attr(‘class’, 
‘glyphicon glyphicon-pause’);
005            }
006            else {
007                videoPlayer[0].pause();
008            $(‘.glyphicon-pause’).attr(‘class’, 
‘glyphicon glyphicon-play’);
009            }
010            return false;
011        })

Display current time

We’ll now hook up the current time span via jQuery. You may have noticed the forward slash that is currently being outputted, this will serve as the break between the current time and the total time. Add the following code block underneath the previous step within your document ready script block.

001    videoPlayer.on(‘timeupdate’, function() {
002            $(‘.current’).text(videoPlayer[0].
currentTime);
003        });

Less accuracy

You may have noticed that our time includes milliseconds as well as seconds; this is probably a little bit too accurate for most situations. Altering the previous step to the following code will round that number up to the nearest second. You can extend this functionality to display hours, minutes and seconds as well.

001    $(‘.current’).text(Math.round
(videoPlayer[0].currentTime));

Total time

The next thing to do is to get the total duration of the video and display this next to our current time. Add this code underneath the previous step to hook up the span in our control <div>. Again; you will need to round the number to get rid of the milliseconds.

001        videoPlayer.on(‘loadedmetadata’, 
function() {
002            $(‘.duration’).text(Math.round
(videoPlayer[0].duration));
003        });

Mute the audio

Combining everything that we have learned form the Play/Pause button, we can hook up the Mute/Unmute button with the following ‘if’ statement. Place this underneath the previous step, within the document ready bracket. This will switch the button class to the Mute icon, and back again when a user interacts with it.

001    $(‘.btnMute’).click(function() {
002            if (videoPlayer[0].muted == false) {
003                videoPlayer[0].muted = true;
004                $(‘.glyphicon-volume-up’).attr(‘
class’, ‘glyphicon glyphicon-volume-
off’);
005            } else {
006                videoPlayer[0].muted = false;
007                $(‘.glyphicon-volume-off’).attr(‘
class’, ‘glyphicon glyphicon-volume-
up’);
008            }
009        });
010        

Go fullscreen

The final button we need to hook up is the Fullscreen button. Going fullscreen works slightly differently for different browsers, so there will be two jQuery commands that will do the exact same thing. Add this underneath the previous step and run your browser to see the results. Press ESC to exit fullscreen.

001    $(‘.btnFullscreen’).on(‘click’, 
function() {
002            videoPlayer[0].webkitEnterFullscreen();
003            videoPlayer[0].mozRequestFullScreen();
004            return false;
005        });

Add some style

Now we’ll make our controls’ appearance look a bit better by adding the following code within our CSS block from Step 8. When dealing with floating elements, don’t forget to add a clear underneath to prevent other elements from being affected in weird ways. This code will space our elements out nicely.

001    .videoControls {
002            width: 100%;
003            font-size: 30px;
004        }
005        .videoControls span, .videoControls div  {
006            display: inline-block;
007        }
008        .btnMute, .btnFullscreen {
009            float: right;
010            padding-left: 20px;
011            margin-right: 20px;;
012        }
013        .btnPlay {
014            padding-right: 20px;
015            margin-left: 20px;
016        }

Change the colours

The final stage is to amend the colour scheme and change it from the default Bootstrap blue. Feel free to adjust the colours to match your site’s aesthetic. Add this code underneath the previous step within your CSS block. For a production environment it is recommended that you put all CSS and JS in separate files. There you have it! Your own custom responsive HTML5 video player is now ready to be shown off.

001    .videoControls span, .videoControls div {
002            display: inline-block;
003            color: #999;
004        }
005        .btnMute, .btnFullscreen {
006            float: right;
007            padding-left: 20px;
008            margin-right: 20px;
009            color: #999;
010        }
011        .btnPlay {
012            padding-right: 20px;
013            margin-left: 20px;
014            color: #999;
015        }
016        .glyphicon:hover {
017            color: #555;
018        }
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://hydoho.com/ Hydoho

      Thanks for posting important html video player. i want to try this and see how it works .