Tuesday, March 4, 2008

Fullscreen Hardware-Accelerated H.264 Flash Video

Before I went to San Francisco to develop peer-to-peer Internet video solutions for BitTorrent, I was promoting my own peer-to-peer video streaming solution, Alluvium. There was a lot of interest in the time in p2p acceleration for video streaming and Alluvium had a unique take, pushing DVD quality videos over standard consumer broadband Internet connections. I pitched this software to KLRU, our local Austin PBS affiliate, and their comments would be the same ones that I would hear from everyone. They loved it, they were shocked by the quality, they desperately wanted to get all of their content online as soon as possible and that they needed p2p in order to make the economics work out. They only had one problem with Alluvium. It used its own customer player, a necessity to achieve quality playback. They wanted a Flash player because they wanted to integrate the player directly into their website.

Unfortunately, Flash has never been synonymous with high-quality video. At the time, Flash was missing two components necessary to be used for high-quality video: support for the H.264 codec, which makes files small enough to stream over cable modem but with DVD quality, and hardware-accelerated fullscreen playback, which let's you watch them fullscreen without your computer grinding to a halt.

With the release of Flash 9, Beta 3, (Release #115), Flash now supports these features. With this release, Adobe is positioned to dominate the high-quality Internet video market. Unfortunately, achieving the holy grail of hardware-accelerated fullscreen H.264 video in Flash is not by any means simple and neither the official documentation nor the tutorials available online clarify things.

I have, therefore, drafted this list of tips for people pursuing this noble goal.

  • The only way to achieve fullscreen, H.264, and hardware-acceleration at the same time is to use the FLVPlayback component. Several other options which you might read about should be ignored, such as Video, VideoPlayer, NetStream, and NetConnection.
  • You must use the ActionScript 3.0 version of FLVPlayback. There is an ActionScript 2.0 version available, but it does not have fullscreen support.
  • If you are integrating the player into an existing application, you must rewrite all of your ActionScript 2.0 code to be ActionScript 3.0, as your cannot mix code from the two language variants.
  • Make sure in your Publish Settings that you are exporting as both Flash 9 and ActionScript 3.0.
  • You will need a very recent version of the Flash development environment. You will need Flash CS3 and most likely will need to install all of the available updates.
  • You will need a very recent version of the Flash plugin, at least 9.0 r115.
  • Fullscreen mode for Flash 9.0 r115 for Linux does not work well at all. Even normal quality YouTube videos play back very slowly in fullscreen mode.
  • The supported video formats are Sorenson, VP6, and H.264 codecs in either .flv, .mov, or .mp4 containers. You cannot play .avi, or .wmv files. Not all .mov and .mp4 files will play as some may use other codecs.
  • In order to make a H.264 file, use QuickTime Pro. This is just the normal QuickTime player after you pay the $30 registration fee. It produces the best quality H.264 files. For the container format, choose .mov as it is the most standard.
  • If you have other H.264 files which you have made previously, you need to make sure that the index is at the beginning of the file. Some programs put the index at the end of the file and these files will not stream. Google for the "QTIndexSwapper" program to fixed files that have the index at the end.
  • If you're streaming files from an HTTP server, they must have a .flv, .mov, or .mp4 extension and not take any CGI arguements. For instance, putting the files up on a normal webserver will work fine, but serving them from a content-management or other dynamic system might not.
Once you have a player working, you might want to customize the buttons and the style of the controls. While the documentation provides several options, the only one I have found to work properly is making a new custom skin from one of the standard skins. To do this, I have provided some additional tips:

  • Find a skin you like in Program Files\Adobe\Adobe Flash CS3\en\Configuration\FLVPlayback Skins\FLA\ActionScript 3.0\
  • Copy it and edit it as you'd like.
  • To edit the controls, edit the versions in the library. The items you see on the stage are just examples for you to look at. The actual skin used by the player is created dynamically by pulling thing out of the skin movie file's library.
  • Choose the skin for the FLVPlayback component in the Parameters configuration window, using the skin property.
  • In order for your skin to show up in the list of possible skins. publish it and copy the resulting .swf file to Program Files\Adobe\Adobe Flash CS3\en\Configuration\FLVPlayback Skins\ActionScript 3.0\
  • Make sure that when you upload your final player .swf file to your webserver and you also upload the skin .swf file. Also make sure that both files are readable by the webserver. Otherwise, the controls for your player may not show up.
I hope that this has helped you in your pursuit of fullscreen high-quality video in Flash. It's certainly been an epic journey for me and I'm glad to finally have a working Flash player. Unfortunately, like most media players, it has a visual glitch when switching from one video file to the next in fullscreen mode. It briefly shows the controls on every video transition. This is the exact sort of annoying behavior which we found in every video player and which eventually lead us to writing our own (very nice) player. However, Flash is most likely going to be the king of Internet video, so you have to work with what you have.