HTML5 Video Player

1. INTRODUCTON

What is HTML5 Video?

HTML is the markup language that makes up every page on the web. The newest version, HTML5, includes specifications for a video tag, that is meant to allow website developers to add a video to a page the same way they would add an image. In order for this to work, web browser developers (Mozilla, Webkit, Opera, etc.) have to build the video functionality into their browsers. The W3C has created directions on how video should work in browsers, and it’s up to browser developers to follow those directions, so that video works the same across all browsers. This doesn’t always happen thanks to technology, legal, and financial choices made by browser developers, but so far no one’s varying too far from the specifications. However the specifications are still being changed and refined, so browsers developers have to keep up with that as well.

Playing video in a web page may not seem so special since you can already view video on a web page through plugins like Flash Player, Quicktime, Silverlight, and RealPlayer, however this is a big step forward for standardizing video playback across web browsers and devices. The goal is that in the future, developers will only need to use one method for embedding a video, that’s based on open standards (not controlled by one company), and it will work everywhere.

A prime example of this is the iPhone and iPad. Apple has decided not to support Flash on their mobile devices, but they do support HTML5 video. Since Flash is currently the most common way video is added to web pages, most web video (aside fromYouTube who has a special relationship with Apple) can’t be viewed on the iPhone or iPad. These devices are very popular, so many web sites are switching to hybrid HTML5/Flash player setups (like VideoJS).

HTML5 Video Strategies

There are two strategies one can take when providing both Flash and HTML5 Video:

1. Default to Flash and only use HTML5 video when the browser or device doesn’t support Flash (or other video plugins).
2. Default to HTML5 video and only use Flash when the browser or device doesn’t support HTML5.

There are positives and negatives to both strategies (and VideoJS can do both). Video sites that have invested a lot in their Flash video player and are using advanced functionality will probably choose the first strategy for the time being. This allows them to continue to provide the extra features for most users, while also supporting devices like the iPhone. Sites with more standard video player requirements that are interested in using a technology that will probably become the standard, may choose the second strategy. Every site has different needs so there’s no right answer for everyone. If you need help deciding, you can start a discussion.

RTMP Steaming vs. Progressive Download. One major factor in deciding which strategy to use is whether or not you need to use RTMP streaming through a streaming server like Flash Media Server or Wowza. The major benefit of streaming video is that it protects it from being downloaded and copied.

Sites like Hulu that have copyrighted content, use RTMP streaming. HTML5 video (or more specifically HTML5 compatible browsers) doesn’t support RTMP streaming yet. With “Progressive Download” video (the most typical method for serving video), you can still make it difficult to copy the video file, however it won’t ever be as secure as RTMP streaming.

The downside of RTMP streaming is that it’s not accessible by devices like the iPhone, and definitely not accessible by older mobile devices, so you still need to provide other less secure versions for those devices, or not support them at all. I would guess this is why you see sites like Hulu only providing iPhone videos to paid subscribers.

What’s an HTML5 Video Player?

“HTML5 Video Player” is a slightly ambiguous term. Browsers that support HTML5 video have video players built in, including a set of controls (play/pause etc.), so you don’t need anything else to play video in them. However, in addition to having a built-in player, browsers also give website developers access to the video functionality through a javascript API. This allows developers to build custom video player controls or other interfaces, that utilize the browser’s core video functionality.

Some javascript developers have packaged their custom player code into libraries, like VideoJS, and have made them available for others to use. When someone mentions an HTML5 video player, they are most likely talking about one of these custom libraries.

Why use an HTML5 Video Player?

Knowing that HTML5 browsers have a built in player, you might wonder why you’d need an additional library like VideoJS at all. There’s actually a number of reasons.

• Browser Version Compatibility. As the specification grows and changes, browser developers add new functionality to their players, and may even change the way an existing functionality is used. An example of this is when the spec changed from autobuffer to preload, as the video tag attribute used to preload the video before the user hits play. Older versions of Firefox still use autobuffer, while newer versions require preload. VideoJS fixes this by checking for either attribute and triggering the one the browser needs.

• Additional Features. Not all built-in players support all the features you might expect from a video player, like volume control and fullscreen mode. Many HTML5 browsers, including older versions of webkit, don’t support Fullscreen Mode, so an HTML5 Video Player can simulate Fullscreen Mode by filling the browser window with the video.

• Consistent Design & Controls. Each browser has a different look & and feel to their built-in controls. If you want to present the same controls to every visitor you need an HTML5 Video Player.

• Browser bug fixes. Sometimes browser developers introduce bugs that they don’t realize and/or fix until a few versions later. Some of these bugs can actually be fixed through javascript, so it doesn’t matter if a user has an older version.

• Cross Browser compatibility fixes. Sometimes a feature of one browser breaks another. For instance, if you only include one video source for your video tag, and the browser doesn’t support it, it won’t fallback to the Flash player like you might expect. It will just stop and your video won’t play. VideoJS is able to get around this by forcing the browser to fallback to Flash. This is great if you want to only encode your video to the H.264 format (Safari, Chrome, iPad, iPhone, and Flash).

What is Video For Everybody?

Video for Everybody is a pure HTML (no javascript) embed code for HTML5 video, developed by Kroc Kamen, that includes a fallback to a Flash video player, as well as video download links for devices that can’t do Flash or HTML5 video (e.g. older & “dumb” phones). It’s been tested across an extensive list of devices, so if you want your video to be uber-compatible, this is the place to start. VideoJS uses Video for Everybody as its embed code, and then builds on that great base, using javascript to add additional features, browser bug fixes, and additional compatibility.

HTML5 video players that aren’t built on Video for Everybody risk being incompatible with many mobile devices, as well as any browser or device that doesn’t have Javascript enabled or built-in.

What is VideoJS?

VideoJS is an HTML5 Video Player with 3 core parts: An embed code (Video for Everybody), a Javascript library (video.js), and a pure HTML/CSS skin (video-js.css).

Using Video for Everybody as the embed code means you know it’s compatible with many devices (including ones without javascript).

The javascript library fixes browser & device bugs, and makes sure your video is even more compatible across different browser versions.

The pure HTML5/CSS skin ensures a consistent look between HTML5 browsers, and easy custom skinning if you want to give it a specific look, or brand it with your own colors. See the skins page for examples of custom skins.

2. HOW IT WORKS

Adding VideoJS to Your Page

The first step is to download the latest version of VideoJS, unzip it, and upload it to your server.

Next you’ll include the Javascript and CSS libraries in your page. Change the src/href to the appropriate location on your server.

<head>
  ...
    <script src="video.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
  ...
  </head>

After that you’ll add some Javascript to your page to trigger VideoJS when the page is loaded. This can be done in the header, or in a separate Javascript file, as long as it’s run after the VideoJS library is included. There’s also a number of options you can set, and other methods of triggering VideoJS that will let you store a reference to the player so you can access it later, including a jQuery plugin. See the included README file for an up-to-date list of player options and setup methods.

<script type="text/javascript" charset="utf-8">
    // Add VideoJS to all video tags on the page when the DOM is ready
    VideoJS.setupAllWhenReady();
  </script>

Finally, add the VideoJS embed code (based on Video for Everybody) to your page, replacing any sources with the source location of the video you want to play. You can also replace the Flash video player fallback with your own flash player, as long as you maintain the class="vjs-flash-fallback" on the object. You can optionally exclude different sources or fallbacks, however the full embed code will always be the most compatible. Also see the included README or demo.html for the latest version of the embed code.

<!-- Begin VideoJS -->
  <div class="video-js-box">
    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
    <video class="video-js" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
      <object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
          title="No video playback capabilities." />
      </object>
    </video>
    <!-- Download links provided for devices that can't play video in the browser. -->
    <p class="vjs-no-video"><strong>Download Video:</strong>
      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
      <!-- Support VideoJS by keeping this link. -->
      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
    </p>
  </div>
  <!-- End VideoJS -->