Playing videos on all platforms…

It wasn’t that long ago that when you wanted to put a video on your website, you count on Flash for a nice video player. It was the near-standard for a long time. Even YouTube adopted (and still uses) Flash for its video player. But then along came Apple, and everything changed.

Apple launched a full-blown war against Adobe about the same time the iPhone was released. Adobe had hoped to release a version of the flash player plugin for its mobile Safari browser, but Apple raised questions about security. HTML5 was quickly spreading, and a built-in browser-level player.

A couple of weeks ago I was put onto a project that featured some of our TV commercials work. On the front page was a nice video “sales” pitch from our CMO. The problem: “We want it to play on the iPad.” Sure, no problem. The problem was they wanted it to play on every other browser as well. This is when I turned to VideoJS.

VideoJS is an HTML video player with a Flash player fallback for older browsers. You can add poster images, offer full screen viewing, and even skin it to fit in better with your website’s design. It supports pretty much any format of video you want — mp4, mov, ogv, webm, etc. Its easy to set up, and works really nice a lightbox. They even have plugins for WordPress, Drupal, jQuery, Umbraco, and Joomla.

Here’s a quick lesson on how it works. Tutorial code courtesy of VideoJS.com.

First, hop over to the VideoJS web site and grab the library, and toss it into your web folder.

Second, include the javascript files into your page:

<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>

Third, add this code to trigger the VideoJS player on page load:

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

Fourth, add the VideoJS code to your website.

  <!-- Begin VideoJS -->
  <div class="video-js-box vjs-paused">
    <!-- 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 -->

Please take note of the lines with the oceans-clip.* video files and images. That’s where you’ll drop in your files.

That’s all there is to it to get VideoJS going. You can check with their documentation for settings such as autoplay and buffering.

Overall I was extremely happy with this player. It’s very smooth, and works perfectly. I tested it on IE 7 & 8, Firefox 3.6, 6, and 7, Chrome 13 & 14, Safari 5, iPhone, and iPad. It played perfectly in all of them.

I highly recommend VideoJS the next time you need a video player that is compatible with browsers old, new, and mobile. Its free, lightweight, and works perfectly. Its quick and easy to set up, and will support about any format of video you need. With the pre-packaged skins, and ability to create your own, you’ll have a fully integrated video player on your web site in no time.

Here’s a demo:

Dan Joseph is the CEO and head of Software Engineering of Familiaris Games, a start-up game studio 
developing online and mobile games.

Aside from my personal game projects, I am collaborating with Ben Davis on multiple future 
projects, and writing the story and script for an upcoming AAA level RPG, modelled after the same 
type of game play you see in Lost Odyssey, Final Fantasy, and other Japanese-based RPGs.  When 
I'm not developing games, I'm working as a Web Developer on various major brand web sites.

You can follow me on twitter @iamdanjoseph.  

If you wish to contact me, please click the contact page, 
and fill out the form.  I will get back to you as soon as I can.
Written by Dan
I am a Magento Certified Developer Plus and Software Developer. In my spare time I like reading, doing things with my Church, and hanging out with my wife and daughter. I am a Christian and like sharing things I am studying and reading.