Video Tutorial: Supporting HTML5 with Flash Fallback in Sorenson Squeeze 9
HTML5 with Flash fallback is a great option for websites who need a simple way to create videos that play on desktops and mobile devices. If you’re looking to use HTML5 with Flash fallback, Sorenson Squeeze 9 offers a simple high-quality solution. Squeeze 9 comes in multiple versions, and they’re reasonable upgrades from previous versions. In looking at Squeeze 9, key new features include streamlined workload, pre- and post-roll stitching (which makes it easy to add custom messages to the beginning and end of your videos), closed-captioning support, and optimize for HTML5, which is the feature we’re going to explore in this tutorial.
Here’s how it works. We’re going to be encoding a very short video of my daughter shot on New Year’s Day. We’re going to try and encode this file so it will play back on all browsers whether HTML5-compatible or not, and mobile devices. To support this, in the formats tab Sorenson created a new category called HTML5 video. There are two presets (Figure 1). You can customize these, you can create your own, and you can put them in your favorites if you use them a lot. We'll use the higher data rate version of the 360p preset. As with all Sorenson Squeeze presets, you apply it by dragging it into the compression window, double click it to bring up the encoding parameters.
Figure 1. Squeeze 9’s HTML5 video category includes two presets. You can customize them or add your own.
Key here is that Squeeze is creating two files, an H.264 file and a WebM file. Within H.264, you can choose from the MainConcept H.264 file, the CUDA codec ·which uses GPU hardware acceleration), or the X.264 codec (Figure 2). This file is going to play in IE10, IE9, Safari and Chrome. It’s also going to play on all mobile devices because all recently shipped smartphones and tablets—whether iOS, Android, or Windows—play the H.264 codec via HTML5.
Figure 2. Squeeze creates two files, H.264 and WebM. Within the H.264 output options, you can choose from the MainConcept, MainConcept CUDA, and x.264 codecs
The other output is the VP8 file. This is the WebM file that’s going to play in the two browsers that don’t support H.264, Firefox and Opera. Sorenson is going to apply the same basic encoding parameters to both files, 600 Kbps, one-pass VBR, 96 Kbps mono audio, 640 x 360. If you want to change any of these for both files you certainly can. If you want to customize the encoding parameters for either file you can also do that.
If you prefer X.264 you get great access to all the different configuration parameters available for that codec, and the same goes for VP8. Sorenson did a really nice job a couple of versions ago when they added VP8 support of duplicating pretty much every function you can access in the Google command line and coding interface. So you get great access to all the configuration parameters, and Squeeze does a great job producing very high quality, very efficient files, meaning they meet the target data rate, and the video quality is generally pretty competitive against all other encoding tools. Simply name the file, then press “save,” and press “squeeze it” to encode the file.
Figure 3. A look at the various files Squeeze creates when it does an encode, including the HTML code (Disney.html).
You can see all the files that Squeeze created (Figure 3). There’s a Squeeze project file, which we can ignore. There’s the WebM file, there’s the MP4 file, there’s the SWF file for Flash playback, and there’s the HTML code. If you open that file in a program like TextWrangler, you'll see the code that Squeeze created and inserted into the HTML file that we just opened, including the famous HTML5 video tag (Figure 4). Squeeze tells us that the MP4 file plays in IE 9, IE10, and Safari. Chrome also plays the MP4 file.
Figure 4. When you open the HTML code file in TextWrangler, here’s what you see.
And then we see the WebM file for Firefox and Chrome, and then there’s the Flash fallback. So this is the code that, if the browser isn’t HTML5 compatible, will tell the browser to play the Flash version of the file, which obviously will be the H.264 version or the MP4 file.
You could do this manually; there’s nothing magical about it. But if you’re not a coder this can get pretty complicated, with a lot of trial and error, so what Squeeze does is really create a very efficient way of both encoding the two files and creating the necessary HTML file. And once you have that, you go to your FTP utility, you drag the files up to your website, and you're done.
Now, what happens when we try and play this on various browsers and various mobile devices? Well, if you go over to an older computer, such as one with IE6—which according to NetMarketShare, is still about six percent of the installed basic browsers out there—and right click the video file, you'll see that IE6 is calling the Flash player to play this file (Figure 5). That’s the Flash fallback that we talked about several times. If the browser isn’t HTML5-compatible it will call Flash to play the video file.
Figure 5. If a browser that’s not HTML5-compatible, such as IE6 shown here, tries to play the file, it will fall back to the Flash version.
On more current browsers it will play either the H.264 file or the WebM file natively. If you open the video in Chrome, right click and choose “save video as,” you'll see that Chrome is playing the MP4 file. Back in January of 2011, Google a huge announcement that they were going to drop H.264 from Chrome. They haven’t yet, and I’m guessing they never will.
If we look at Firefox, you'll see that Firefox is playing the WebM version. If try to right click in Opera, it’s going to save in HTML file, which tells us nothing, but since Opera doesn’t play H.264 natively, it’s a pretty good guess that it's playing the WebM file. And finally, if you check Safari, there’s no right click commands available, but since Safari is HTML5 compatible and only plays H.264, it's obviously playing the H.264 file as well.
So what about mobile devices? The video should play on all iPads and iPhones, and it should play on pretty much every recently shipped Android device, because they all support H.264 playback and they all support HTML5.
Basically, as long as you don’t need features like adaptive streaming, closed captions or DRM support HTML5 with Flash fallback is a great alternative. And as you've seen, Squeeze 9 makes supporting HTML5 with Flash fallback exceptionally easy to implement
Related Articles
Overcoming obstacles that prevented it from making the switch previously, YouTube says HTML5 video is now ready for the spotlight.
28 Jan 2015
Add overlays, control the video timeline, insert subtitles, and offer localized content. Create new experiences with interactive HTML5 video.
05 Feb 2014
Users can output two HTML5 versions, plus the needed video tag code, with a new HTML5 preset.
05 Apr 2013
Companies and Suppliers Mentioned