Flash Player 9: Bringing HD Flash Video to the Web

In: Articles

By Tom Green

Published on October 29, 2007

At a recent Adobe MAX conference, I was quietly sitting in a comfy chair absorbing the information overload, when an attendee from my session earlier that day plunked herself down beside me and shared her own Flash video story. Her clients, seeing all of those gorgeous sites out there that use Flash video, wanted to jump on the bandwagon, too. They said what I have heard all too often: “I have the stuff on DVD.”

This meant she’d need to obtain the source files from the studio or shop that created the videos, convert the videos to the FLV format used by Flash, and post them to the client’s site. Inevitably, a couple of days later, the client phones, complaining that:

• The videos have been resized down to 320 by 240 from their original size of 848 by 480.
• The video they gave you was sharp and the one they are looking at is fuzzy.
• The full screen version of the video looks horrible and pixelated.

Having experienced this, she was wondering if it was worth all the aggravation, and said, “What am I doing wrong?”

My answer was, “Nothing.” Those issues won’t go away, because moving from High Definition (HD) to FLV means a loss of quality. It is similar to moving a Photoshop high-resolution TIFF image to the JPG format—the loss in quality can’t be avoided.

This is a conversation that I have all too frequently, as web developers cope with an increasing demand from their clients to incorporate video into their sites.

Wouldn’t it be great if that conversation was a thing of the past? Don’t you wish you could take source video and simply heave it onto a website and have it play at full size, at full sharpness, and not have to worry about bandwidth, resolution, and file size? The news is that your wish may have been granted.

Adobe released a beta of the Flash Player this past August and, in the process, may have kicked off yet another web video revolution by making the whole process of putting high definition video on the web incredibly easy. How? By allowing us to use .mov files—which anyone on a Mac or Windows can create using Quicktime Pro, or anyone with an HD camera and video editing software can make with ease.

It’s all still in beta, and, yes, you should still learn how to put video on the web effectively using Flash, Flix, or Sorenson Squeeze, but right down the road are some incredible changes that will make the process of putting video on the web not only easier, but result in much higher quality than we could have expected even six months ago.

What’s all the fuss about?

Point your browser to Adobe’s Labs site, where you’ll see Flash Player 9. You can download and install this open beta version of the Flash 9 Player, which has been code-named Moviestar. This release, according to Adobe, includes “support for H.264 video and HE-AAC audio codecs.” Video and web-video pros immediately get how profound a change this brings, but many of you may have had the same reaction a web design colleague of mine had: “Huh?”

For many web designers, that is a reasonable response. You may never have invested the time to understand what the heck an FLV file is, and now here is something completely new. Let’s take a moment to become familiar with the technology.

If you head over to Apple’s web site and view their Mac ads, you can watch the popular Mac versus PC ad collection. Under each video, you can choose from a number of video sizes, including HD. When you click on the HD link, you will see a rather high resolution, large version of the ad start to play. Here’s what’s in it for you: That ad you are looking at, which is a .mov file, now plays just as easily through the Flash Player 9 beta as it does through QuickTime or the QuickTime plug-in for your browser.

This beta expands the number of file formats that are playable through the Flash Player to include .mov and .mp4 files encoded using the same codec used to create that HD Apple ad: H.264. Adobe has posted an example of an HD file playing through the Flash Player 9—just be aware that you need to have the beta player installed or you will get an error message.

Image 1: HD content, such as this Apple ad, can now be played through the Flash Player 9.

What this means to you is that your videographer can now hand you an HD digital video in .mov or .mp4 format, and you can use Flash to toss it up on your site and stream it.You get the superior high-quality benefits of HD—think DVD-quality video on a web page—without really having to know how to encode an FLV. All you need to know is how to code it up in Flash…and I’ll get to that in a moment.

The key to understanding codecs is that the videos you use don’t contain them. A codec is what is used to analyze each frame of a video image and store that information on a DVD, CD, tape or other media. The term codec is short for Compressor/Decompressor. The file is compressed when it is captured, and later decompressed when played back through a web page, TV or other display medium. There are a lot of codecs out there. Some are used for video editing or TV broadcast, while others, such as H.264 and ON2VP6 (On2), are designed for the low bit-rates used by the Internet or your cell phone.

The operating system or video player used to play the video must have the codec built into it to ensure playback. Flash video works beautifully because the Flash Player contains the On2 and Sorenson codecs used to play Flash video. To see what I am talking about, try opening an FLV file in the QuickTime player on your computer. You are going to get an error message telling you the movie could not be opened because “The file is not a movie file.” QuickTime does not include the On2 and Sorenson codecs in its lineup.

H.264, which really is nothing more than a codec, is quite robust. It is used to create video or audio files for playback in everything from your cell phone to the HDTV sitting in your living room. What makes the video pros all excited about H.264—you may also know it as MPEG-4—is that it can deliver great performance at relatively low data rates, and it is an industry standard for encoding high-definition content.

Along with the ability to deliver HD content through the web, the beta version of the Flash Player also supports the HE-AAC (AAC+) audio format, which is the higher-quality successor to the MP3 format. If you own an iPod and have downloaded content from iTunes, you have been listening to this audio format for quite some time. The bottom line is, we are soon going to be in a win/win position: We will be able to easily deliver higher quality video and audio content without the usual bandwidth hit, and without being tied to a particular audio or video player.

It isn’t going to happen overnight. If you read the release notes, you will see that Adobe is quite clear that this technology is still in its infancy. The documentation states:

Additionally, for high-definition video (720p or 1080p) content encoded with either On2 or H.264, performance will vary depending on the capabilities and configuration of your machine. In general, a 2.0 GHz Mac or a 3GHz PC, with one or more processors, will deliver an optimum experience.

Translation: You need a rather powerful machine, initially, to avoid lags and other performance hits when viewing this content. Still, computer manufacturers are rapidly migrating to dual-core processors—in fact, as I write this, I have just replaced my Dell portable and its Pentium processor with a new dual-core Apple MacBook Pro—meaning that performance issues will eventually disappear as the Pentium processors recede into history.

Does this mean the FLV format and the ON2VP6 codec used to create it are dead? Far from it. For example, the current iteration of H.264 doesn’t support alpha channels, while ON2VP6 does. In fact, the day after Adobe released the beta, Mike Savello, Senior Vice President, Flash Business at On2 Technologies, blasted an email to the company’s customers. In the note he made it clear that:

Our native support of H.264 has made it easy for us to add support of the newly announced Adobe Flash Player with H.264 video and AAC+ audio. This support will be phased into the Flix Engine along with native H.264 authoring in the September timeframe. You’re probably wondering what Adobe’s announcement of H.264 support in Flash means to you. H.264, while comparable in quality to VP6, gives Adobe compatibility with the new HD broadcast and DVD formats. This allows Adobe to target Flash on consumer devices, a stated goal of theirs. With that said, VP6 will remain a dominant Flash video standard for many years to come.

In short, On2 is committed to making Flix Engine the fastest, highest quality, most robust audio and video encoding and transcoding tool available. We plan to make it easier than ever to support the proliferation of video content from the web to mobile, set-top, and other devices.

You can interpret this however you wish, but it looks like On2 Technologies is in the game as well.

The really interesting aspect of H.264 is this: When you encode the video you aren’t just encoding for web playback. This format is used in:

• iTunes
• iPod Video
• Cell Phones
• PDAs
• DVDs including the Blu-Ray spec.
• Sony PlayStation Portable (PSP)

This is just a small list, but the bottom line is that video or audio content in this format is not tethered to a particular device or manufacturer. The same video you watch on your iPod can be delivered through your website or burned onto a DVD and played in your home theater.

Another difference in the H.264 format is the physical size of the video. We are used to playing Flash video through a browser that sits in a 320 by 240 or 640 by 480 space. Thanks to the current iteration of Flash CS3, we are also able to expand that video to full screen at the click of a button. We have also become accustomed to working to the standard 4:3 aspect ratio used for digital video. HD uses a different aspect ratio, 16:9, and you may be wondering if this is going to result in a performance hit at playback. The answer, as I pointed out earlier, is, “Not really.” Built into the Flash Player beta is hardware acceleration and multi-threading support, which means you can now play back video at any resolution and bit depth. For example, a video with the NTSC/VGA resolution of 720 by 480 is going to play just as smoothly as the one you watch on your HD TV screen at home, which has a resolution of 1920 by 1080.

I know many of you are wondering if I have been drinking the Adobe Kool-Aid. We usually think, “If it is big, it is also slow.” You can actually see that I haven’t been drinking anything by returning to the sample put out by Adobe. If you click the Full Screen button, you will see the video fill the screen with no loss of quality. In the beta player, hardware acceleration is enabled by /files/includes/default.css. You can see this by right-clicking (PC) or control-clicking (Mac) and selecting the Settings item in the Flash Player Settings dialog box. If you are familiar with full-screen Flash video, you may be surprised by how clear the video is on the screen. Let’s explore that a bit more.

The new enhanced rectangle support for full screen is catching the attention of those who work with Flash. When a Flash SWF plays, the physical dimensions of the SWF are set in the Flash authoring application. These dimensions are the stage size. This means that any content in a Flash movie is constrained to the “box” determined by the dimensions of the Flash Stage. For example, if you view a Flash video that allows for full-screen playback, clicking a Full Screen button will expand the SWF to fill the screen. This can result in a fuzzy video, because the stage containing the video is scaled to fit the screen, and the video scales along with the stage. Rectangle support removes this issue. Flash coders can now use a new property: fullScreenSourceRect. It is part of the Stage class, and essentially tells Flash to put the physically large video in that box, without scaling the stage. (This new property, by the way, is not exclusively an ActionScript 3 property. If you use Flash 8, it is available to you there as well.)

Image 2: Full screen HD content is made possible through hardware acceleration.

Keep in mind that this product is still in open beta. It will be tweaked quite a bit between now and its release date some time in late 2007 or early 2008. Still, the beta version opens our eyes to the possibilities that lie ahead. For example, your clients can now provide you with video content that you can swiftly deploy to cell phones, PDAs, iPods, web pages, and HDTV, without concern about file formats and encoding. Video experts will love this, because they can create content in Final Cut Pro, Premiere, After Effects, Sound Booth, Audition, or Garage Band, without having to create separate versions of the file for a variety of formats or devices. Best of all, the quality of the video or audio file they hand you is the quality of the file seen or heard across multiple platforms.

Now that I have you interested, let’s help you join the party.

Deploying HD video to a website

Over the coming months, we’ll see in-depth tutorials that show how to take full advantage of the H.264 features in the Flash Player. For now, let’s just simply get you up and running. We’ll create a version in ActionScript 2.0 for those of you who still use it, and one in ActionScript 3.0 as well. You are going to need to code this, because the FLVPlayback component used in both language versions won’t recognize an H.264 file yet. A new FLVPlayback component will likely hit the streets in conjunction with the consumer release of this beta Flash Player.

The ActionScript 2.0 method:

1. Go to the Adobe Labs site and download the Flash Player 9 update. For those of you who are at all twitchy about messing with your system, this update strictly adds extra functionality to the Flash Player 9. It won’t affect anything else.
2. Head over over to the Apple site and help yourself to a movie trailer or a Mac/PC ad. I will be using the ad, shown in Figure 1, which I have renamed ChooseVista.mov.
3. Launch Flash CS3. Open a new ActionScript 2.0 document in Flash CS3 Professional, and set the stage size to a width of 850 (the width of the video) and a height of 485 pixels. If you have downloaded a different video, open the video in the QuickTime player and select Window, then choose Movie Inspector. Note the dimensions of the video.

   If you are using Flash 8, just open a new document and set the stage size to the values in Step 3.

   
   Image 3: You need to know the dimensions of the video you will be playing.

4. Save this Flash file to the same folder as the video you will be playing.
5. Open the Library and select New Video… from the Library pop down menu. When the Video Properties dialog box opens, just make sure Video (ActionScript-controlled) is selected, and click OK to close the dialog box.

   You may notice that I am using a Video Object and not the FLVPlayback component. This is because, as mentioned earlier, the component only recognizes FLV files.

6. Drag the Video Object from the Library to the Stage.
7. Select the Video Object on the Stage, and in the Property Inspector. give it the instance name of myVideo. Set the dimensions of the object to match the dimensions of the video. After you change the dimensions, make sure the Video Object is sitting on the Stage and not hanging over the pasteboard.
8. Add a new layer named Actions.
9. Click once on the keyframe in the Actions layer, and press the F9 (PC) or Option-F9 (Mac) key(s) to open the ActionScript editor.
10. Click once in the Script pane and add the following code:

    var nc:NetConnection = new NetConnection(); nc.connect(null); var ns:NetStream = new NetStream(nc); myVideo.attachVideo(ns); ns.play("ChooseVista.mov"); 

    The big change here—whether you are using ActionScript 2.0 or ActionScript 3.0—is the file used in the ns.play() method. Notice that the video uses the .mov, not the .flv, extension.

11. Close the Actions panel.

    What you can’t do, at least at this time, is press Control-Enter (PC) or Command-Return (Mac) and test the movie. It simply will not work, because this functionality has yet to be added to the beta player. To test your movie, you need to play it in a browser.

12. Select File and then Publish Settings, and select both the Flash and HTML document type, as shown in Image 4. Click Publish. When the progress bar finishes, click OK to close the dialog box. Save the project.

    
    Image 4: Output both a SWF and the HTML wrapper.

13. Open the folder containing the HTML file, and double-click the file. The browser will open and the video (Image 5) will start playing. Welcome to the brave new world of HD video in Flash.

    
    Image 5: Welcome to the party.

The ActionScript 3.0 method:

If you are currently using ActionScript 3.0, things are not much different.

1. Launch Flash CS3. Open a new ActionScript 3.0 document in Flash CS3 Professional, and set the stage size to a width of 850 and a height of 490 pixels.
2. Save this Flash file to the same folder as the video you will be playing.
3. Open the Library and select New Video… from the Library menu. When the Video properties dialog box opens, make sure Video (ActionScript-controlled) is selected, and click OK to close the dialog box.
4. Drag the Video Object from the Library to the Stage.
5. Select the Video Object on the stage and, in the Property Inspector, give it the instance name of myVideo. Set the dimensions of the object to match the dimensions of the video. After you change the dimensions, make sure the Video Object is sitting on the Stage and not hanging over the pasteboard.
6. Add a new layer named Actions.
7. Click once on the keyframe in the Actions layer and press the F9 (PC) or Option-F9 (Mac) keys to open the ActionScript editor
8. Click once in the Script pane and add the following code:

   var nc:NetConnection = new NetConnection(); nc.connect(null); var ns:NetStream = new NetStream(nc); myVideo.attachNetStream(ns); var listener :Object = new Object(); listener.onMetaData = function (md:Object):void{}; ns.client = listener ns.play("ChooseVista.mov"); 

   The major difference between ActionScript 2.0 and ActionScript 3.0 is you use the attachNetStream method, not the attachVideo method to hook the stream into the Video Object on the stage. You also need to create a listener for the metadata in the video, regardless of whether or not the video contains metadata.

9. Close the Actions panel.
10. Select File and then Publish Settings, and select both the Flash and HTML document type, as shown in Figure 4. Click Publish. When the progress bar finishes, click OK to close the dialog box. Save the project.
11. Open the folder containing the HTML file and double-click the file. The browser will open and the video will start playing.

Rumblings from the licensing side of the street

When Adobe announced this technology, one of the first questions raised was about potential licensing and royalty issues. Adobe has obtained a non-commercial decoding rights license for the AVC/H.264 codec. The key words there are non-commercial. If your content is non-commercial, knock yourself out—but if it is for commercial use, you are going to fall into a potential gray area. (How this came about is a jumbled thicket. If you are interested, the group that offers the license – MPEG LA has an explanation here. If you really want to see what is going to require a royalty and what isn’t, MPEG LA has posted a FAQ here.)

At this point in the product cycle, Adobe has remained rather quiet about licensing, other than a brief mention at the bottom of the Flash Player 9 Update announcement’s FAQ. Right now the best advice I can offer is to stay purer than pure and stick with the FLV format, unless you’re certain that you’re complying with all license terms.

What have we learned?

Conflicts between video producers and Flash producers over HD video quality may soon become a thing of the past. The Flash producer makes a simple change in the code—the video’s extension is .mov or .mp4 instead of .flv—and the video is good to go. Though we’ve just presented a simple example in this article, you can do a lot more than just play an H.264-encoded video. For example, the new fullScreenSourceRect property is a major step forward in the playback quality of full-screen web video. You can also play back AAC and AAC+ (HE-AAC) audio files in this beta. Again, the audio formats have expanded, allowing you to use these audio files or the old standby MP3 format which is used by Flash.

Remember that a gray area remains in the licensing of commercial content playing through the Flash Player, but over the next year or so, this will undoubtedly be sorted out.

Let’s revisit, then, the web developer I met at the Adobe MAX conference, who was beginning to dread requests for Flash video on client websites. With the promise of Flash Player 9 and H.264, her life just became easier.

Links

If you want to discover more about the H.264 format, check out these links:

• Obtain the update at Adobe Labs.
• Discuss it with others at the Flash Player 9 Update Wiki.
• For a general overview of the H.264 format: Wikipedia or Apple.
• For a tech wonk around the nuts and bolts of the update: Tinic Uro, an Adobe engineer, goes deep, deep inside the Adobe announcement.
• Rob Reinhardt give a great, succinct overview of what’s in it for you at CommunityMX.
• Licensing information for commercial content: MPEG LA.

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: Technology, Flash