How To: Put HTML5 On A Page

This week has been kind of fun, we’ve been getting ready for the release of IE9 Platform Preview 3, and around 2pm PST today – it was released!  The reception has been awesome so far!  This is the build that supports <video>, <audio> and uber cool – <canvas>!

I’m going to save <canvas> for another post but wanted to get a post out tonight about some quick ways to try out the <video> tag and ways to encode H.264 video.

REMEMBER: This is still an early preview release and there may be some fun issues… For example, in my demos below, IE9 is showing both the video and the non-video content, it should only be showing the video. That’s why these are platform previews!

Putting <video> on your page is EASY!

    <video poster="http://www2.petelepage.com/videos/poster.jpg" src="http://www2.petelepage.com/videos/skydive.mp4" preload="none" controls style="border-radius: 10px; border: 5px solid black;">
        <div style="margin:5px;padding:5px;border:1px solid black;">
            <h2>Sad Panda: HTML5 Video Not Supported</h2>
            <p>This browser doesn't support HTML5 video with the H.264 video codec, so instead, you get the generic fall back.</p>
            <p>You could install the <a href="http://ietestdrive.com">IE9 Platform Preview</a></p>
            <p>In reality, you should probably put a Flash or Silverlight fall back here, 'cause not everyone will install a new browser just to see my/your video!</p>
        </div>
    </video>

Results In…

The video above was shot while I was in Australia earlier this year, a bunch of my friends and I went sky diving just outside of Sydney to celebrate Christian’s birthday.  Eric (the second one) compiled all of our videos together into one single video, put a sound track to it, and made this great video!  It’s about 35 megs for the 5:30 minutes worth of video. It won’t start until you hit play, so it shouldn’t cause stuff to start playing without your input!

So What Does Everything Mean?

• preload=”none” tells the browser not to preload the video file unless the user hit’s the play button – saves on bandwidth.
• poster=”" indicated where the browser should load the poster file from, that’s the image the browser shows until you hit play, or it finishes loading the video file
• src=”" – well, that one’s pretty obvious, it’s the video you’re trying to load
• controls – tells the browser to show the video controls. In IE9 PP3, if the video width is less than about 400px, it won’t show the controls because the image is too small, I fought with that one for more than a few minutes! Grrr! Also, I’m using the more relaxed HTML5 syntax here, and not giving the attribute a value, you could do controls=”controls” if you want to make sure your code validates as expected.

You could also add…

• autoplay – plays the video without the user having to click the play button.
• loop – loops the video infinitely, or until the user hits the stop button, or navigates away from the page.
• width or height – sets the width and height of the video element.

Encoding Videos

Getting the <video> element on your page is the easiest part! How big is the video, both from a screen size perspective, and from a file download size is the more challenging part! Is it encoded with the right encoder? Some point and shoot cameras record in H.264 mode, some (like my Canon SD780 IS) don’t .  Encoding the video is likely the most difficult!

So how what’s the best way to resize and encode your video? There are a bunch of tools available today, some free, some paid. Sadly, the free Windows Live Movie Maker won’t encode videos with the H.264 encoder . I’m going to walk through how to do this with Expression Encoder 4 Pro. It’s part of the Expression Studio set of tools. If you’re an MSDN subscriber, you can download it as part of your MSDN subscription. Otherwise, you can download the 60 day free trial from the Expression Site, after that you’ll need to purchase a license for it.

For the rest of the walk through, I’m going to assume you’ve already got Expression Encoder 4 Pro installed, and you’ve got the video file that you want to encode ready to go.

1. Start Expression Media Encoder, when it starts, it’ll prompt you with a “Load A New Project” dialog box.  Since we’re going to put our video online with the HTML5 video tag, not Silverlight, you want to create a new Transcoding Project.
   
2. Now that we’re in Expression Media Encoder, we need to import the video file that we want to encode.  Under the File menu, choose Import and find the file that you want to encode.  It’ll take a second to analyze and for Expression Encoder to read the file completely (especially if it’s a big file you want to encode).
   
3. Now we need to chose our output encoding settings, thankfully Encoder 4 Pro makes that pretty easy for us.  In the Presets box in the left, there are a bunch of pre-configured settings you can choose from.  Video can get really big, depending on the quality and length of video, so unless I need super high quality, I typically choose one of the Encoding For Online Services profiles, and from there I usually use an standard def profile, but again, you’ll want to experiment with this depending on your needs and the bandwidth of your users and your server.  For this example, I chose the “H.264 YouTube SD” profile, which results in a file that’s about 4megs per minute of video.  Be sure to click Apply once you’ve chosen your profile to apply the settings.  You’ll notice that the area in red now defines the output format, and other information.  You can go in and expand out any of those tabs to change how the video is encoded. The video that I’m encoding is 16:9, but you’ll notice the output format is 4:3.  Because of that, Expression Encoder will automatically add the black bars above and below the video, and give me a letter box look.
4. The other important tab you’ll want to make sure you’ve got set up how you want it is the Output tab – this is where Expression Web will save file that it just encoded. I change the output directory from my user folder to the web folder that I’m working on, and also turn off the Sub-folder by Job ID check box.  I don’t use Job ID’s, so there’s no need for that.
5. We’re now ready to encode!  Push the Encode button on the bottom left part of the screen and Expression Encoder 4 Pro will start it’s magic…  After a couple of minutes, you’re file will be done and ready to go!

Other Resources

There’s a fantastic post on DiveIntoHTML5.org with some really great info about the video tag and how to use it that I’d highly recommend checking out at http://diveintohtml5.org/video.html.  On there, he also talks about other encoders that you can use (including some of the free ones), and also the different issues surrounding codecs.

Some Other Fun Videos

I shot these videos last January while I was in St. Maarten.  If you’re an airplane buff like I am, it’s a place you HAVE to go at some point, watching a 747-400 land or take off less than 100 feet from you is AMAZING!  I never knew a Dash-8-Q400 could give such a good exfoliation when standing behind it

Enjoy!
PEte

PS: I tested these links and videos in Internet Explorer 9 Platform Preview 3, and Chrome 5.
[UPDATE 6/24/2010 @ 3:42PM PST] I added the preload=”none” attribute to all the videos so browsers that do support video don’t download the videos unless you ask for them.