Code a Mobile-Friendly HTML5 Video Stream with Multiple Sources

Advertise here with BSA

New media on the Internet has gone through a rigorous process of quality control and best practices for web developers. Back just a few years ago Flash video was the most prominent solution. But with HTML5 support in all modern browsers the solution to embedding audio/video media has become a lot less complicated.

In this tutorial I want to explore how we can build a very simple webpage for embedding mobile-responsive HTML5 video. I have included two versions of the page – one with standard HTML5 video and the other using Video.js. The HTML is almost identical which shows how much progress HTML video has made in a few short years. But you can check out a demo of both pages from the links I’ve included below.

Live Demo – Download Source Code

Default Page Structure

The first step is building our typical HTML page layout which will hold the video contents. I’m going to make a flexible wrapper centered in the page which also resizes for mobile screens.

To start out let’s construct the document header with some additional script resources. I’m including the latest release of jQuery along with a copy of the HTML5 shiv script via Google.


<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Mobile-Friendly HTML5 Video Demo</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" type="text/css" href="./css/global.css">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Skranji">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

Each of the meta tags deserve a quick mention since they are key to rendering properly on mobile devices. The HTML viewport meta tag specifically sets the layout rendering to a 1×1 grid with pinch-to-zoom disabled. This will keep all our page elements displaying proportionately regardless of the type of device.


<div id="w">
  <h1><center>A Pup Named Scooby Doo Intro</center></h1>
  <div id="videoplayer">
    <center><video id="intro" controls preload="none" width="640" height="360" poster="./media/poster.png" data-setup="{}">
      <source src="./media/intro.mp4" type="video/mp4">
      <source src="./media/intro.webm" type="video/webm">
    </video></center>       

    <p class="credits"><strong>Source:</strong> <a href="http://m.youtube.com/watch?v=_RozV8AVH6U">YouTube</a></p>
  </div>
</div>

Now the code snippet above should be placed inside the document <body> tags. This contains our wrapper div with a small page title, plus a source link to the original YouTube video. But the HTML5 video tag itself actually includes two different sources – mp4 and webm.

Diverse HTML5 Video Formats

In reality you can get by streaming videos with just an .mp4 source file. Most of the modern Flash video players have included support for MP4 video containers encoded using H.264. This same encoding can be streamed directly from your iPhone or Android(YouTube Mobile offers this as well).

The second source I’ve included is called WebM which is an open source media project. These video files are encoded with VP8, a slightly lesser-known video codec. However the file sizes are much smaller in comparison and they don’t require excess metadata. Since we are not using a Flash player fallback this is a good choice for a secondary source.

Most of the modern browsers do support MP4 playback without any extra plugins or codecs. This includes Google Chrome, Safari, and newer versions of Internet Explorer. Firefox and Opera are the two major browsers which have trouble working directly with MP4 video containers. WebM and OGG/OGV are the two alternatives and I would argue neither is explicitly better than the other.

However for my personal preference WebM does seem like it’s gaining more traction and support from bigger companies. YouTube has video streams converted into WebM formats and Google fully supports the open source project. Also Miro Video Converter is a 100% free app which will convert any number of video files into WebM.

Creating Flexibility with CSS

There is just a single property declaration used to make all video elements responsive. HTML5 video players use a poster image to display a preview of the video before streaming. This whole player interface should resize itself based on the current browser width.


video { max-width: 100%; height: auto; }

This same technique can be used on images which do not fully fit into their containers. As the page body decreases in size the video will have to break outside the div or shrink down. If we never let the video go beyond 100% width then it will always hold the same aspect ratio, regardless of size.

Working with Video.js

I have used this library a few times and the developers have done an incredible job. I don’t use this script all the time, but it’s helpful in circumstances where the default HTML5 video player interface is a little drab.

To start you should download a copy of VideoJS source files from their github repository. Inside you’ll find a lot of demo files but all we need are 4 specific resources: video-js.min.css, video.min.js, video-js.swf, and video-js.png. The CSS/JS files can be included right in the top header area, and the PNG sprite file should be located in the same directory as the stylesheet.


  <link rel="stylesheet" type="text/css" href="./css/global.css">
  <link rel="stylesheet" type="text/css" href="./css/video-js.min.css">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Skranji">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <script type="text/javascript" src="./js/video.min.js"></script>

It’s surprisingly easy to update your standard HTML5 video code to be running on the VideoJS library. After including the necessary resources find your video tag and add this line of code after the ID attribute:


class="video-js vjs-default-skin"

The video-js class is used to determine which videos should be embedded through the JS library. The default skin class is setup inside the CSS stylesheet which was created by the developers. It’s a custom theme which includes icons for play/pause, audio, and a tracking scrubber bar.

One issue I’ve noticed with VideoJS is that on some mobile platforms the video element will still hold its full width/height without resizing. The player will have issues scaling to fit inside the container and that’s not pretty on a smartphone screen. But keep in mind the project is still in development and welcomes contributions from 3rd party developers. I’m fairly confident over time we’ll hear a lot more about this project and see great things presented by the VJS team.

Live Demo – Download Source Code

Final Thoughts

Although this code is fairly basic the principle development techniques are still the same. Understanding how to create webpages which naturally cater to digital media is an important stepping stone. Web developers should grow accustomed to learning these new standards and adopting with trends as they rise in popularity.

But don’t be afraid of trying new techniques or open source libraries as they become available. Video JS is merely one example of some developers trying to further the ideals of online video streaming. But searching through code repos such as Github will yield many similar results. Additionally if you have questions or suggestions about the code feel free to share with us in the post discussion area below.