God isn't bland. The Church shouldn't be, either.
Get Started with HTML5 Video

HTML5 will soon be the new norm.

If you don’t know what I’m talking about, dont worry about it too much. It’s the background structure and protocol running web pages. Firefox, Safari, Opera, and Google Chrome are all HTML5-ready on some level. IE 6, 7, 8 are not HTML5-ready, but the rumor is IE 9 will be. I’m not holding my breath.

One of the big new laws in HTML 5 is the way a website can interact with video. We can now use a more native video format that streams better on browsers and mobile devices. Yes, iPhone and iPad (and other mobiles) can use HTML5 video. In fact, HTML5 video will eliminate the need for Flash on most devices.

Lets create a smooth video promo page for an upcoming sermon series. We’ll start with a simple design, and then move onto the video part.

Design

Sticking with a simple design. We want to center our video, and give it a nice frame.

The base html:


<html>
     <head>
          <title>Video demo</title>
     </head>

     <body>
          <div id="wrapper"><!-- wrapper to create a center column -->
               <h2>Video Demo</h2>
               <div id="video">
                    <!-- video here -->
               </div>
               <h2><a href="#">Enter site</a></h2>
          </div><!-- close out the wrapper -->
     </body>
</html>

and our basic css:


body {
     margin: 0;
     padding: 0;
     font-family: Helvetica, Arial, Sans-serif;
     background: #111;
     color: #ccc;}

#wrapper {
     width:680px;
     margin: 0 auto;
     padding: 20px;
     text-align: center;}

#video {
     width: 640px;
     height: 400px;
     }

a, a:visited {
     color: #22daff;}

a:hover {
     color: #d1d1d1;}

Video conversion

Here is my biggest gripe against HTML5 video. Each browser has their own video type. Safari: mp4, Firefox, OGV, and Chrome: WebM. Kind of a pain to convert your video to 3 formats, but in general it is a better experience for the end user right? So we’ll suck it up and deal with it.

So whats the easiest way to convert to these file types? I’ve discovered Miro Video Converter. It works on both mac and PC. mirovideoconverter.com, and best of all its free. I use this to convert all of my videos.

Video player options

Sure HTML5 can take the new video symantic tag. But it doesnt leave the most consistent user experience. Then what about those lowly IE users? We can’t ignore them. We may want to, but we can’t.

There are a handful of opensource javascript and css players. They make it nice and easy to auto detect the browser type, and deliver the best video possible. Some even offer a flash drop out for the worst case IE users.

Some options include:

Each essentially adds a layer of functionality and style to the HTML5 video tag. I liked Video JS for this use.

Prepping your server for the video

This is a super important step. Not all servers will recognize the mime types of videos. Using a simple htaccess file, we can add these three simple lines to indicate the file mime types.

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm

Pulling it together

  1. Download the Video JS codes, and upload the files to your server.
  2. Insert the necessary codes for the CSS and JS into your files head tag.
  3. Insert their player codes into your video div.
  4. Modify the file paths to your videos for each file type.
  5. Update the flash var source for the back up video, making sure you use a absolute full url.

Save and test!

Here is my final result with the videos playing in native formats for Firefox, Safari, and Chrome, with IE dropping to a flash swf fall back: http://proofs.factor1studios.com/mediasalt/video

Now you don’t have an excuse to not be producing great video splash pages or video on your site, with full support for all browsers and mobile devices.

Matt Adams (@mattada) is a summer contributor, and Creative director for Factor 1 studios. Factor1 works with churches, non-profits and small businesses across the U.S. and in 3 other countries to create awesome websites, brands and marketing strategies. See all summer 2010 contributor bios
Share on TwitterShare on TumblrShare via email


  1. Distort it (Reply) on June 24th, 2010

    This is a great tutorial. I am looking forward to playing around with this tonight!

  2. Eric (Reply) on June 24th, 2010

    As excited as i am about html5 video right now just embedding our vimeo video is way easier.

  3. Matt Adams (Reply) on June 24th, 2010

    @eric

    while i agree with you that making a single video and uploading to vimeo is sooo easy. This is for the end user. Probably not ideal for every little video. but for weekly sermons, or a big event push, i think having the compatibility for all devices non-flash based will be key.

    unless vimeo starts hosting html5 & flash. then we are talking ease!


Connect with Facebook