H.264 Codec In Flash

The next major step in the video revolution is here. Adobe Flash Player 9 Update 3 is taking a step into the high-definition HD video realm in a major way by adding MPEG-4 video to its already impressive ranks of video support. MPEG-4 utilizes crisp, powerful H.264 encoding and is an industry standard for video, which includes high-definition HD delivery. It is also the standard for HD content online and on devices such as your home television.

To pair with the excellent visual power of H.264 encoded video, Flash Player 9 Update also supports HE-AAC audio, which is the higher quality successor to MP3. Advanced Audio Coding AAC is a high-efficiency HE and high-fidelity HiFi, low-bandwidth audio codec that can be used with or without video.

These codecs allow users to stream high-quality video at low bit rates. In addition, this update to Flash Player makes it possible to leverage tools that are standard across the industry, such as Adobe Premiere Pro, Adobe After Effects, Adobe Soundbooth, and Adobe Audition and even such non-Adobe technology as Apple Final Cut Pro to create and deliver compelling video content. Future updates are even being planned for Adobe Creative Suite 3 CS3 to enhance end-to-end H.264 content development and distribution. The future is looking very bright indeed.

The new video and audio capabilities are available in Adobe Flash Player 9 Update 3 version 9,0,115,0 and will be included in the upcoming release of Adobe AIR. Both platforms will have the ability to stream from the next generation of Flash Media Server, due to release early next year. The new Adobe Media Player, a powerful new AIR application, will also support H.264, HE-AAC, and encrypted video content using the new Flash Media Rights Management Server from Adobe.

So does this new Flash Player support for MPEG-4 and H.264 mean that it will replace the On2 VP6 codec. Absolutely not. The addition of H.264 gives developers greater choice to select the technology that best meets their needs. The current implementation of H.264 does have some limitations, such as lack of support for alpha channel and the inability to embed video into a SWF file. On2 VP6 is a solid, high-quality choice for Flash-based video projects. The On2 VP6 codec is also clear of any licensing issues that may arise with MPEG-LA. Licensing information can be found on the MPEG LA and Via Licensing sites. The On2 VP6 codec will remain a consistent and viable option for media delivery. The added support for H.264 simply means that there are now more options and wider spread compatibility for high quality and HD video.

This article takes a look at the new codecs and file types supported in Flash Player Moviestar. In the article I ll show you how to import both H.264 video and AAC audio into Flash, examine how to use hardware acceleration with the new Flash Player Update, and provide instructions on how to import the metadata included with MPEG-4 files.

This section provides information on the H.264 video spec guidelines and AAC/AAC compression. You will learn what is technically supported in H.264, what standard HD video dimensions are, how H.264 is a container format and what that means some basic information on what AAC/AAC has to offer, as well as some basic encoding resources.

MPEG-4 Motion Pictures Expert Group H.264 is an international standard for video compression recognized by the International Organization for Standardization ISO. H.264 is also known as MPEG-4 Part 10 or AVC Advanced Video Coding.

What does that mean. First, it means that when you encode your video for H.264, you re not just encoding it for Flash Player; video can be played back using other software like Apple iTunes or your iPod, or on Sony PlayStation Portable PSP. With the new hardware scaling and multithreading support of Flash Player, you can now play back video at any resolution and bit rate, including the ultimate high-definition 1080p as long as the system supports it see Figure 1.

Figure 1. Screen resolutions and bit rates available with the current video standards

The MPEG-4 standard also describes a container format, which means that one file can contain several different types of data, stored as tracks. The overall file synchronizes and interleaves the data. So the video or audio in an MPEG-4 container can also be accompanied by metadata, cover art, subtitles, and other textual or visual data that can potentially be extracted by Flash Player. The container can also include multiple video and audio tracks too, but Flash Player will only play back one of each right now and ignores the rest.

Audio files encoded in an MPEG-4 container can now be used in Flash Player if they use the AAC Advanced Audio Coding codec. The AAC codec is a lossy compression scheme for audio that has been used since MPEG-2, but has been updated for MPEG-4. It should be familiar to most people, since all music sold from iTunes uses AAC. For you technical folks, it is much higher quality because it can support capture up to 96kHz and can support up to 48 channels and backwards prediction. AAC achieves higher audio quality than MP3 files and maintains similar or lower file sizes. AAC or HE-AAC High Efficiency AAC is the AAC codec with the addition of parametric stereo and spectral band replication that has been optimized to provide high-quality audio at a low bit rates for applications such as streaming audio. Now you can take advantage of this file format through Flash Player by bringing in MPEG-4 files with AAC encoded audio.

With the H.264 update to Flash Player, video encoding has now been standardized across the entire video ecosystem, including the Adobe Creative Suite 3 family. Tools such as Adobe Premiere and After Effects can now be used to deliver content without using additional plug-ins.

Part of adopting H.264 is leveraging the massive number of solutions on the market. The following is a list of some of the companies that provide industry standard tools for encoding video in the supported format for the new Flash Player 9 Update 3:

Flash Player 9 Update 3 plays files derived from the standard MPEG-4 container format that contain H.264 video and/or HE-AAC audio, such as F4V, MP4, M4A, MOV, MP4V, 3GP, and 3G2. One thing to note is that protected MP4 files, such as those downloaded from iTunes or digitally encrypted by FairPlay, are not supported. For a full list of codecs supported by Flash Player, read the TechNote about it.

To get more information about Flash Player 9 Update 3, visit the Flash Player product page.

To discuss Flash Player 9 Update 3 with the online developer community, visit the main Flash support forums.

Important considerations when streaming H.264 content

One important thing about playing an H.264 video file as progressive download is that the moov atom needs to be located at the beginning of the file, or else the entire file will have to be downloaded before it begins playing. The moov atom is a part of the file that holds index information for the whole file. Unfortunately, tools such as Adobe Premiere and After Effects place this information at the end of the file, but Adobe is working to fix this in a future update to the CS3 video production tools. This isn t an issue for streaming the H.264 video files, however, so Flash Media Server users can breathe easy.

Two open-source solutions to adjusting the moov atom to allow progressive streaming are:

This section gives a hands-on approach to integrating H.264 video and AAC/AAC audio using the power of ActionScript. For these examples you will use an AAC/AAC encoded M4A file. You will gain an understanding of how to play audio and video content using the power of the NetConnection, NetStream, and Video classes.

Playing H.264 content using NetStream

MPEG-4 content must be brought in through a NetStream object, but what it takes to play H.264 content in your Flash movie doesn t change much although you ll need to watch out for a few more unsupported content messages. The new status messages are NetStream.Play.FileStructureInvalid and NetStream.Play.NoSupportedTrackFound. The former is sent when the MPEG-4 file structure is invalid, and the latter is sent when none of the audio or video tracks in the MPEG-4 file is supported.

You can also trick the video components in Flash into playing H.264 video files by changing their file extension to. flv. The video components currently look for the. flv extension for files they are playing, although Adobe is currently working on changing the specification and in a future update this won t be necessary.

Here is the more orthodox way to play a video using progressive download:

Create a new ActionScript 3.0 Flash file. Save the file and name it H264_Video_AS3.fla.

In the Timeline, rename Layer 1 as AS:Main see Figure 2.

Figure 2. Creating a new ActionScript 3.0 file

Select Frame 1 in the Timeline and open the Actions panel on Windows: F9, on Mac: Option F9.

Declare a video variable at the top of the code:

Create a new NetConnection object and pass in null as the only parameter for the connect method:

var connect_nc:NetConnection new NetConnection ;

Create a new NetStream object, passing your NetConnection object as a parameter to the constructor:

var stream_ns:NetStream new NetStream connect_nc ;

In ActionScript 3.0 you ll need to specify a client object for the NetStream to handle stream events, otherwise you will receive a compile error. You don t actually have to create the handler methods, but you must have the client object. Let s set the client object equal to this so the Timeline can handle the NetStream s events. Add this code before you attach the NetStream video to the video object:

Now to create the event listeners. Create the handler function for the NetStatusEvent as shown below:

function netStatusHandler p_evt:NetStatusEvent :void

Inside the netStatusHandler function, create an if conditional statement. The conditional will check if the code property of the event object is equal to the string value of NetStream.Play.FileStructureInvalid:

if p_evt.info.code NetStream.Play.FileStructureInvalid

Inside the if conditional, use the trace method to output a string that states the file structure is invalid:

trace The MP4 s file structure is invalid ;

After the if condition, create an else condition. The else condition will check if the code value of the event object is equal to the string NetStream.Play.NoSupportedTrackFound:

else if p_evt.info.code NetStream.Play.NoSupportedTrackFound

Inside the else condition, use the trace method to output a string that states the MP4 doesn t contain any supported tracks:

trace The MP4 doesn t contain any supported tracks ;

The completed netStatusHandler function should look like this:

trace The MP4 s file structure is invalid. ;

Now let s attach this event handler to the NetStream object:

stream_ns.addEventListener NetStatusEvent.NET_STATUS, netStatusHandler ;

Under the line where you added the event handler, let s create your video dynamically:

Use the attachNetStream method of the Video class rather than the old attachVideo method used in ActionScript 2.0:

video.attachNetStream stream_ns ;

Pass the URL or path of your H.264 video to the play method of the NetStream object:

stream_ns.play backcountry_bombshells_4min_HD_H264.mp4 ;

Using ActionScript to play AAC files

Playing AAC M4A files is the same in both ActionScript 2.0 and ActionScript 3.0. Just use the NetStream object and play the file:

Create a new ActionScript 3.0 Flash file. Save the file and name it AAC_Audio_AS3.fla.

In the Timeline, rename Layer 1: AS:Main see Figure 3.

Figure 3. Creating a new ActionScript 3.0 file: AS:Main

Select the Frame 1 in the Timeline and open the Actions panel on Windows: F9, on Mac: Option F9.

Create a new NetConnection object named connect_nc, and then call the connect method, passing in null as the only parameter:

connect_nc:NetConnection new NetConnection ;

Pass the URL or path of your AAC M4A file to the play method of the NetStream object:

stream_ns.play RE-Sample.m4a ;

The completed code should look like this:

Test your movie in the browser. The audio should begin to play.

Using a Sound object to control an AAC file

The previous section reviewed how to use ActionScript to play AAC files. Controlling your M4A audio with a Sound object is a little trickier. The Sound object can t load in M4A files the way it can load MP3 files, so for this part you ll need to bring files in using the NetStream and then work with them from there:

Open the same Flash file that you worked with in the first audio example AAC_Audio_AS3.fla or open the AAC_Audio_AS3_Sound_complete.fla file in the sample files folder.

On the AS:Main layer in the Timeline, select Frame 1 and open the Actions panel on Windows: F9, on Mac: Option F9.

Declare the SoundTransform variable at the beginning of the code:

You can t directly access the properties of the NetStream s SoundTransform object, but you can reference the object itself. So after you start playing the video in the NetStream, set the mySound variable equal to the NetStream s soundTransform property, like this:

stream_ns.play RE-Sample.m4a ;

mySound stream_ns.soundTransform;

Set the volume for mySound, using a number between 0 and 1:

Overwrite the NetStream s soundTransform property with mySound so the changes to the volume will be applied:

stream_ns.soundTransform mySound;

The completed ActionScript should look like this:

Test your movie in the browser. The audio should begin to play, with the volume level at about half of what it was originally.

Using a SoundTransform object to control an H.264 file

With ActionScript 3.0, you cannot use the Sound object to control the video s audio, because the Sound object has been altered so you can no longer attach sounds. Instead, you ll need to use the SoundTransform object attached to the NetStream. Here are the steps:

Open the same file that you worked with in the video example H264_Video_AS3.fla or open the H264_Video_AS3_Audio.fla file in the sample files folder.

On the AS:Main layer in the Timeline, select Frame 1 and open the Actions panel on Windows: F9, on Mac: Option F9.

This is where things get a bit odd. You can t directly access the properties of the NetStream s SoundTransform object, but you can reference the object itself. So after you start playing the video in the NetStream, set your mySound variable equal to the NetStream s soundTransform property, like this:

Using ActionScript 3.0 and Flex to play H.264 content

H.264 content is supported in Flex as well. Here are the steps:

Create a custom class that extends the UIComponent class. Call yours H264Video and store it in a subfolder called video.

Before the constructor, declare some variables, like this:

private var _connection_nc:NetConnection;

private var _stream_ns:NetStream;

In the constructor, call both the super and an init methods:

Write the init method as shown below to create Video, NetConnection, and NetStream objects:

_connection_nc new NetConnection ;

_stream_ns new NetStream _connection_nc ;

Under the _stream_ns NetStream _connection_nc ; line, add in a line of code to set an object as the client for your NetStream. The handling isn t necessary, but you must construct the client object:

Also add in a line of code to handle status events from the NetStream:

_stream_ns.addEventListener NetStatusEvent.NET_STATUS, onStatus ;

In the init method, attach the NetStream to the video, add the video to the display list, and start playing the video file if the _filePath exists. The completed method should look like this:

_video.attachNetStream _stream_ns ;

Create the function to handle status events. In particular, handle those two new status events that you can track in H.264 video:

private function onStatus p_evt:NetStatusEvent :void

Alert.show The MP4 s file structure is invalid., Status ;

Alert.show The MP4 doesn t contain any supported tracks, Status ;

else if p_evt.info.level error

Alert.show There was some sort of error with the NetStream, Error ;

Create getter/setter methods for the _filePath property. On setting the filePath, call the play method on the NetStream instance and pass it the filePath s value. Also add a Bindable metadata tag above the getter, like this:

public function get filePath :String

public function set filePath p_path:String :void

You can then bring your video into the Flex application either solely by ActionScript or by using MXML. In your MXML file, you can create a tag on the Stage for your H264Video, and then specify an id, x, y values, etc. If you are using the Adobe AutoComplete Input Flex component to get code hints, Flex will create the namespace for you to use this tag. Also, set the filePath property on the MXML tag, pointing to your video file:

In the past, when you worked with Flash-based video, you could inject additional data into the video file for use during playback. The onMetaData event was commonly used to retrieve this data during runtime. The data would contain simple pertinent information such as track length and video dimensions. That same type of information is also available with the new supported video formats.

Since MPEG is a container format that can contain many different items of information grouped together into one file, it is useful to access different bits of information inside that container. Using the onMetaData event of the NetStream, you can extract a variety of information such as dimensions, length, codec, seek points, and potentially cover art, subtitles, audio book chapters, and other text and images from both H.264 and M4A files.

It s important to note that if the seek points aren t included in the metadata, you won t be able to seek in the file at all. There are also new onImageData and onTextData events that respond to this data for both audio and video files. The onImageData returns GIF, PNG, or JPEG data as a ByteArray in ActionScript 3.0 only. The onTextData can return text data such as subtitles. Cover art may also be encoded in your audio or video files; they are most often accessed through the onMetaData event. I will explore this in the following walkthrough.

Here are the steps for extracting metadata from video files:

Open the same file that you worked with in the video example H264_Video_AS3.fla or open the H264_Video_AS3_MetaData.fla file in the sample files folder.

Create a new layer in the Timeline under the AS:Main layer and name it output see Figure 4.

Figure 4. Creating a new layer beneath: output

While Frame 1 of the output layer is selected, create a dynamic text field on the Stage.

With the text field selected, open the Property inspector on Windows: Control F3, on Mac: Command F3.

Set the x property of the text field to 5.

Set the y property of the text field to 5.

Set the width property of the text field to 175.

Set the height property of the text field to 300.

Give the text field the instance name of output_txt.

On the layer AS:Main select Frame 1 and open the Actions panel on Windows: F9, on Mac: Option F9.

In ActionScript 3.0, you have to handle the onMetaData event through the client object of the NetStream. So first write the function that handles the metadata and have it receive the event object as its only parameter. Write this code below the netStatusHandler function:

function onMetaData p_info:Object :void

Inside the onMetaData event handler, create a for loop that will loop through and display the properties of the p_info object to the dynamic text field. The code should look similar to this:

for var propName:String in p_info

output_txt.appendText propName p_info propName n ;

Use the metadata to set the size of the video object. After the for loop in the onMetaData event handler, set the width property of the video object to the value of p_info.width, like this:

Set the height property of the video object to the value of p_info.height:

Note: The video file in the sample files is 1280 x 720, so you ll want to size your Flash project to accommodate that size. Use 1465 x 720 as the width and height dimensions to size your sample files.

The completed onMetaData handler should now look like this:

Test your movie in the browser. You may not see your output text field because the video is getting loaded on top of it. To solve that problem, you ll move the video over. Right before the addChild video ; line, set the x value of the video to 185 and the y value of the video to 5:

Save the file and test your movie in the browser again. The metadata should be displayed in the visible output text field and the Video object should resize to match the size of the source video.

Here are the steps for extracting metadata from audio files:

Open the same audio file you ve been working with AAC_Audio_AS3.fla or open the AAC_Audio_AS3_MetaData.fla file from the sample files folder.

Create a new layer in the Timeline under the existing AS:Main layer and name it output see Figure 5.

Figure 5. Creating a new layer: output

While Frame 1 of the output layer is selected, create two dynamic text fields on the Stage and give them the instance names length_txt and copy_txt.

Select the text field with the instance name length_txt and set its x position to 10 and its y position to 5. Set the width of the text field to 240 and its height to 21. Also click the Show Border Around Text button in the Property inspector to add a border around the text field. Your Property inspector should look similar to Figure 6.

Figure 6. Updating the text field settings

Select the text field with the instance name copy_txt TextField and set its x position to 10 and its y position to 31. Also set its width to 240 and its height to 21 and click the Show Border Around Text button in the Property inspector. After making these changes, the Stage should now roughly appear like the example in Figure 7.

Figure 7. Updating the settings of the two text fields

Select Frame 1 of the AS:Main layer in the Timeline and open the Actions panel on Windows: F9, on Mac: Option F9.

After declaring the NetStream object, set the client property of the NetStream object equal to the reference value this, so that the root Timeline will handle events from the NetStream. In ActionScript 3.0, you have to handle the onMetaData event through the client object of the NetStream:

Create an event handler for the onMetaData event. The function should receive one parameter named p_info that is typed as an Object:

Inside the onMetaData event handler, set the text property of the length_txt text field to display the length of the audio source file. The length of the audio is stored as seconds in the duration property of the event object, so you can multiply that number by 1000 to get the duration of the media in milliseconds:

length_txt.text Length: p_info.duration 1000 ms ;

Set the text of the copy_txt TextField to display the codec used to encode the audio source file. This codec information is stored in the audiocodecid property of the p_info object received by the onMetaData event handler:

copy_txt.text Codec: p_info.audiocodecid;

Test the movie in the browser and you should see some basic information extracted from the file s metadata. That s cool, but you can make things more interesting.

Close the browser window and return to Flash. Open the Action panel.

Write a function that will display a cover image. The cover image data is received in the onMetaData event handler as an array of ByteArrays. Under the onMetaData event handler, create a function named handleCoverImage and have it accept an Array named p_data as its only parameter:

function handleCoverImage p_data:Array :void

Note: The cover data you ll be bringing in is 320 x 240, so you should resize your Flash movie to match those dimensions.

Inside the handleCoverImage function, create a new Loader variable and set it equal to a new Loader:

var loader:Loader new Loader ;

After creating the new Loader, call its loadBytes method to load in the data at the first index of the array, casting that value as a ByteArray. You can also retrieve this information for video, as well as audio, if it has the cover art metadata attached:

loader.loadBytes p_data 0 as ByteArray ;

In the last line of the function, you ll need to add the Loader to the display list at index 0 so that the image you load will be visible. Do this by calling the addChildAt method and passing it loader as the first parameter and 0 as the second parameter:

The completed handleCoverImage function should look like this:

Above the existing code in the onMetaData event handler, create an if conditional statement. The if condition should check if the cover data, stored as covr, in the tags object exists:

Move the code where you set the text property for the length_txt TextField above the if condition, like this:

Wrap the code where you set the text properties for copy_txt in an else statement:

Inside the if condition, set the htmlText property of the length_txt TextField to display the copyright information for the audio as a hyperlink to the URL associated with the media. This information is stored as the cpy and url attributes of your sample media files:

Declare a covr variable and set it equal to the covr metadata and cast this value as an Array. Theoretically, you can have multiple images associated with the media as cover data, so the covr property should be treated as an Array:

var covr p_info.tags.covr as Array;

Pass the covr variable as a parameter to the handleCoverImage function you wrote earlier:

The completed onMetaData handler should look like this:

copy_txt.htmlText p_info.tags cpy ;

copy_txt.text Codec p_info.audiocodecid;

Test the movie in the browser. You should now see the cover art included with the audio duration and the copyright information about the media see Figure 8.

Figure 8. Audio source file metadata displayed when the movie is tested in a browser

Another very exciting new feature in Flash Player 9 Update 3 is hardware scaling support for Flash Player which lends itself perfectly to enhancing the video playback experience of HD video in full screen especially when you consider the size of HD 1080p video 1920 x 1080. The new hardware acceleration was not built solely for the new H.264 video capabilities. It also helps with larger On2 VP6 video files and the display of SWF content in general.

Right-click Windows or Control-click Mac inside the Flash Player content in your browser window to display the Flash Player context menu and choose the Settings option to access the Adobe Flash Player Settings panel. The first tab shown is the Display tab see Figure 9.

Figure 9. Display tab of the Flash Player Settings panel for toggling hardware acceleration on and off

The only item on the Display tab is a checkbox asking whether or not you d like to enable hardware acceleration. If the box isn t already checked, check it to enable hardware acceleration which will be in use if the content triggers it using the new ActionScript API. Unchecking or disabling this option forces software acceleration for the case when the scaling API is used. If hardware acceleration is enabled and the API is used, then Flash Player uses the hardware. The key area where you ll see hardware acceleration in effect is in full-screen mode, whether you re scaling a portion of the movie to full screen or the entire movie.

Now let s put the new hardware acceleration to use by scaling just a portion of your SWF to full screen. For overall advice on the particulars of making your movie go full screen, see Tracy Stampfli s excellent article, Exploring full-screen mode in Flash Player 9. If you would like to see an example of the visual effectiveness of full-screen video, check out this Adobe Labs demo.

Here are the steps to scale a portion of the movie to full-screen video:

Open the same file that you worked with in the video metadata example H264_Video_AS3.fla or open the H264_Video_AS3_FullScreen.fla file in the sample files folder.

Select Frame 1 on the layer AS:Main and open the Actions panel on Windows: F9, on Mac: Option F9.

Import the Rectangle and Stage classes at the beginning of your ActionScript:

Any attempts to make the Stage go full screen have to be in response to a user interaction, such as an onRelease or onKeyDown event. Right now, however, you can write the function to make the movie go full screen. Your goFullScreen function will take an event object as its sole parameter:

function goFullScreen p_evt:Object :void

Inside the function, create a Rectangle that has the same dimensions as the video and place it at the same x and y coordinates:

var scalingRect:Rectangle new Rectangle video.x, video.y, video.width, video.height ;

Set the fullScreenSourceRect property of the Stage to the Rectangle you just made. Because that property is not yet officially in the class, you must use square bracket notation to do this:

stage fullScreenSourceRect scalingRect;

After that line of code, create an if conditional statement that checks to see if the display state of the Stage is normal or not, by checking it against the Stage class s NORMAL property, like this:

if stage.displayState StageDisplayState.NORMAL

Inside the conditional statement, change the display state of the Stage to full screen using the FULL_SCREEN property:

stage.displayState StageDisplayState.FULL_SCREEN;

Extend the if conditional statement by adding an else statement that sets the display state of the Stage to normal again:

stage.displayState StageDisplayState.NORMAL;

The completed goFullScreen function looks like this:

var scalingRect:Rectangle new Rectangle video.x,

video.y, video.width, video.height ;

Return to the Timeline and create a new layer above the output layer. Name the new layer control see Figure 10.

Figure 10. Naming the new layer control after creating a new layer above the output layer

While Frame 1 of the control layer is selected, draw a roughly 30 x 30 rectangle on the Stage. Select the rectangle and invoke the Convert to Symbol dialog box press F8. Select the type of movie clip to have the rectangle act as a full-screen button. Name the new symbol Button click OK see Figure 11.

Figure 11. Converting the rectangle to a movie clip symbol named Button

Using the Property inspector, position the button with an x value of 40 and a y value of 320.

Give the button the instance name of fullScreen_mc.

Select Frame 1 of the layer AS:Main and open the Actions panel on Windows: F9, on Mac: Option F9.

The fullScreen_mc button will have to use the addEventListener method to call the goFullScreen function. Add this line after the goFullScreen function:

fullScreen_mc.addEventListener click, goFullScreen ;

Select File Publish Settings to access the Publish Settings dialog box. Select the HTML tab. In the Template drop-down menu, select Flash Only – Allow Full Screen see Figure 12 and click OK.

Figure 12. Selecting the option Flash Only – Allow Full Screen

Test the movie in the browser. Click the fullScreen_mc button. You should see your video go to full-screen display mode.

To learn more about working with video in Flash Player 9 Update 3, go visit Tinic Uro s blog. To get more details about the high-definition standards and codecs, see the Wikipedia articles on H.264 and AAC.

The addition of H.264 and AAC support in Flash Player 9 Update 3 allows you to easily use high-definition, industry standard video and audio. With this update, Flash Player raises the bar further for video on the web and offers display possibilities across a wide range of devices. Pairing the new video capabilities of Flash Player and future updates to the Adobe Creative Suite workflow in addition to new products like Adobe AIR and Adobe Media Player it is safe to say that very exciting times are ahead.

Exploring Flash Player support for high-definition H.264 video and AAC audio

AVC/H.264 codec. Flash Player 9.0.115 also added support for the industry-standard AVC/H.264 or simply, you should use the On2 VP6-E or Sorenson Spark codec.

Encoding live video to H.264/AVC with Flash Player 11

Exploring Flash Player support for high-definition H.264 video it will replace the On2 VP6 codec. Absolutely not. The addition of H.264 gives developers.

Free download H264 Codec pack to play HD H.264 videos including MKV, Download H.264 Codec web software such as the Adobe Flash Player and Microsoft Silverlight.

With the release of Flash Player 11, Adobe has introduced some exciting new features, including performance upgrades such as native 64-bit support, and asynchronous bitmap decoding. In addition, Flash Player can now encode live video streams to the H.264/AVC standard. This new feature allows developers to create real-time, high-quality, live video streaming applications for chat, conferencing, and live event broadcasting.

The heart of Flash Player s ability to encode video to H.264 lies within a new class called H264VideoStreamSettings. This new class is a subclass of VideoStreamSettings, and it s what allows you to control the compression settings for video attached to a NetStream. The following code allows you to encode video attached to a NetStream to H.264 in Flash Player, instead of using the default Sorensen Spark codec:

import flash.media.H264VideoStreamSettings;

var h264Settings:H264VideoStreamSettings newH264VideoStreamSettings ;

h264Settings.setProfileLevel H264Profile.BASELINE, H264Level.LEVEL_3_1

This article demonstrates how to take advantage of Flash Player 11.0 s new H.264 encoding capabilities by walking you through the development of a video encoding and streaming application. By leveraging the Flex 4.6 SDK, and Flash Player 11.0 or higher, you will build an application that does the following:

Captures live video from a webcam

Establishes a connection to Flash Media Server using NetConnection

Publishes video stream from application to Flash Media Server using NetStream

Displays outgoing video stream from camera prior to being encoded in a Video component within the application

Sends encoding parameters to Flash Player to encode the raw webcam video to H.264

Displays encoded video s metadata

Streams live, encoded video from Flash Media Server to the application using another instance of  NetStream

Displays newly encoded, streamed live video in another Video component within the application

This walkthrough demonstrates taking a live video feed that has been encoded to H.264/AVC within Flash Player and sending it via RTMP to a Flash Media Server. The walkthrough below assumes you are using either Flash Media Server 4.5 or Adobe Media Server 5. If you do not have a media server setup online you can download a free copy of Flash Media Developer Server 4.5 here.

Beyond a basic install of either Flash Media Server 4.5, or Adobe Media Server 5, there isn t anything more required to run the example.

If you re new to Flash Media Server 4.5 or Adobe Media Server 5, and would like some guidance on how to get started with streaming media, please refer to this excellent series by Joseph LaBrecque and Tom Green – Beginning Flash Media Server 4.5.

The example application is a simple ActionScript 3.0 project that runs in the Flash Player, and utilizes features found in Flash Player versions 11 or later, specifically. Both start and completed versions of the application are provided H264Encoder_START, and H264Encoder_COMPLETED.

Import  the H264Encoder_START project into Flash Builder by choosing File - Import Flash Builder Project.

In order for this application to work correctly, Flash Builder needs to target Flash Player 11.0 or higher. This happens by default when using the Flex 4.6 SDK, but not when using earlier versions such as Flex 4.5. For instructions on how to set up your project with an SDK earlier than 4.6, please refer to this article.

In Flash Builder with the H264Encoder project selected, choose Project - Properties - ActionScript Compiler.

Verify that the compiler is targeting at least Flash Player 11.0. Fig. 1.2 If it isn t, select the Use a specific version radio button, and type 11.0.0 for the value.

Figure 1. Make sure that the compiler is targeting Flash Player 11.0 or later by inspecting the project s properties.

First, you ll modify H264Encoder_START so that it can communicate with an attached webcam. In addition, you ll add the code necessary for establishing a NetConnection to connect the application to the server, as well two NetStream instances; one responsible for getting the video from the application into Flash Media Server, and one for bringing it back from the server into the application.

Connecting a camera, establishing a NetConnection and NetStreams

Directly under the opening class definition statement, but before the constructor method, create a private variable named nc, data-typed as NetConnection. Use code hinting to have Flash Builder generate the necessary import statement for you, or import flash.net.NetConnection manually. Your code should appear as follows:

import flash.net.NetConnection;

public class H264Encoder extends Sprite

Create two private variables to represent each NetStream. Create one for the stream going from the application to the server ns_out, and another for the stream coming back into the application from the server ns_in. Be sure to import flash.net.NetStream.

Next, create a private variable named cam of type Camera, and set its value Camera.getCamera. The Camera class is a little different than other classes, in that you don t call a constructor to instantiate an object of type Camera. Instead, you call the getCamera method of the Camera class. This method will return an instance of a Camera object unless there isn t a camera attached to the computer, or if there is, but the camera is in use by another application. Be sure to import flash.media.Camera.

private var cam:Camera Camera.getCamera ;

It is now time to add code that will allow the application to connect to the server using an instance of the NetConnection class. Within the provided initConnection function on about line 44, create a new NetConnection by instantiating the nc:NetConnection variable, which you defined in step 1:

private function initConnection :void

It s always a good practice to verify that a NetConnection was successful before any further actions are taken. To do this, add an EventListener to listen for an event of type NetStatusEvent.NET_STATUS. You will create the onNetStatus event handler in the next section. Be sure to import flash.events.NetStatusEvent:

import flash.events.NetStatusEvent;

nc.addEventListener NetStatusEvent.NET_STATUS, onNetStatus ;

Next, and still within the initConnection function body, tell the NetConnection where to connect to by calling the connect method of the NetConnection class. As an argument to this method, add the URL for the location of the live folder within the instance of Flash Media Server or Adobe Media Server you want to connect to. For example, to connect to an instance of Flash Media Server running locally on your machine, you would set the URL to: rtmp://localhost/live.

nc.connect rtmp://YOUR_SERVER_URL/live ;

Finally, tell the NetConnection where the server should invoke callback methods by setting the value for the NetConnection s client property to this. Callback methods are special handler functions invoked by the server when a client application establishes a NetConnection. Later on in this example you will work with the onMetaData and onBWDone callback methods. You will include these callback methods within the main application class, which is in fact the same object that will establish the NetConnection, and therefore the value of the NetConnection instance s nc client property should be set to this. The initConnection function should now appear as follows:

As mentioned, it s always a good practice to verify the success of a NetConnection attempt. To do this, locate the function named onNetStatus on about line 70:

protected function onNetStatus event:NetStatusEvent :void

Within the onNetStatus event body, create a trace statement that outputs the value of event.info.code to the console during debugging. The code property of the info object in the NetStatus event will contain String data that indicates the status of the attempted NetConnection, such as NetGroup.Connect.Success, or NetGroup.Connect.Failed. Tracing the value of this property allows you to check the status of the NetConnection easily by simply running the application in debug mode.

This walkthrough example application will attempt to connect to the server and start playing/publishing video automatically when launched. To achieve this, call initConnection from within the main class constructor method:

The sample application contains two callback functions – onBWDone, and onMetaData. The onBWDone callback checks for available bandwith, which can be useful in applications that need to dynamically switch video assets according to the bandwith that s currently available. Although it s necessary to include these functions in the client code omitting them will generate a runtime error when the server tries to make the function call it s not necessary to actually do anything with them.

This application isn t concerned with monitoring bandwith, so onBWDone can be left as an empty function.

The onMetaData callback function is useful for accessing a video stream s metadata, and the example application provides code within this callback to do just that. The onMetaData callback returns an Array of generic objects that represents the video stream s metadata. Later, you will use those objects that correspond to various metadata in order to display that information within the UI.

Next, you ll add code that enables the application to read webcam data, encode that webcam data to H.264, and to then stream the encoded video to the server.

In this next section, you will attach your webcam to an instance of the Camera class. You will then encode the webcam input to H.264 using properties of the Camera class, and the H264VideoStreamSettings class. Certain encoding parameters can t be set yet, although support for this is hopefully coming soon on H264VideoStreamSettings, so you ll be setting those values on the Camera class.

Next, you will attach the encoded video to a live video stream, and stream it to the server s live directory.

Finally, in order to utilize the provided code that will allow you to read the metadata of the newly encoded video stream, you will call the send method of the NetStream class. As arguments to the send method, you will include setDataFrame, a special handler method within Flash Media Server, the provided onMetaData callback method to listen for the metadata client-side, and finally, a local variable metaData, which will be used to represent the desired metadata items. First:

Within the onNetStatus  handler body, and beneath the existing trace statement, create a conditional statement that checks the value of event.info.code and compares it to the String value NetConnection.Connect.Success. If event.info.code NetConnection.Connect.Success, call three functions that you will create in the next section; one that publishes an outgoing video stream, one that displays the incoming video from the webcam, and one that displays the video stream being sent back to the application from the server. The completed onNetStatus function should appear as follows:

if event.info.code NetConnection.Connect.Success

At this point, you have included the code necessary to establish a NetConnection, and verify the success or failure of that connection with a trace statement. In addition, you ve included calls to functions that will eventually handle the publishing and playback of the video from the webcam, as well as the video coming back from the server.

Locate the function named publishCamera, on around line 85. In the first line of publishCamera, instantiate the ns_out NetStream object by calling its constructor. Pass the constructor the NetConnection instance nc:

protected function publishCamera :void

On the next line, attach the Camera instance cam to the outgoing NetStream by calling the attachCamera method of the NetStream class. Pass this method the cam instance:

Create a new local variable named h264Settings, data typed as H264VideoStreamSettings and set its initial value equal to new H264VideoStreamSettings. Be sure to import  flash.media.H264VideoStreamSettings:

Call the setProfileLevel method of the H264VideoStreamSettings class on the h264Settings instance to encode the video using the BASELINE profile, and a level of 3.1. Be sure to import both the H264Level and  H264Profile classes:

import flash.media.H264Profile;

Use the setQuality method of the Camera class instance to encode the video stream at 90000 bps 900Kbps, and with a quality setting of 90:

Use the setMode method of the Camera class instance to set the video s width, height, and frames per second, and to determine if it should maintain its capture size when if camera has no default behavior for this parameter:

cam.setMode 320, 240, 30, true ;

Next, using the setKeyFrameInterval method of the Camera class instance to set the video s keyframe interval to 15 two keyframes per second :

To set the outgoing video s compression settings, assign the values of the h264Settings variable to the videoStreamSettings property of the outbound stream, ns_out

ns_out.videoStreamSettings h264Settings;

Call the publish method of the NetStream class on the outgoing NetStream, and pass it parameters to provide a name for the stream mp4:webCam.f4v, as well as a destination folder in the server live :

Note: FLV streams don t require a codec prefix, but F4V/MP4 files, MP3 files, and RAW files do. You can find more information about this in the documentation.

ns_out.publish mp4:webCam.f4v, live ;

Create the objects that will hold the metadata values of the encoded video you will access at runtime. This isn t a necessary step for encoding H.264 video with Flash Player, but it s included nonetheless so that the completed application can utilize the metadata returned from the onMetaData callback function that s been provided.

Create a new local variable named metaData, data typed as an Object, and set its initial value equal to new Object :

var metaData:Object new Object ;

Create the following metaData objects and add them to the publishCamera function:

metaData.codec ns_out.videoStreamSettings.codec;

metaData.profile h264Settings.profile;

metaData.level h264Settings.level;

metaData.keyFrameInterval cam.keyFrameInterval;

In order for the application to return the stream s metadata, a special handler built into Flash Media Server named setDataFrame needs to be called from the send method of the NetStream. For more information about setDataFrame and adding metadata to a live stream, please refer to the Adobe documentation.

Call the send method of the NetStream class on the ns_out object and pass it the name of the handler method setDataFrame, and the callback method onMetaData, as well as the local variable metaData:

ns_out.send setDataFrame, onMetaData, metaData ;

The completed publishCamera function should resemble the following:

var h264Settings:H264VideoStreamSettings new

h264Settings.setProfileLevel H264Profile.BASELINE,

metaData.bandwith cam.bandwidth;

The application needs to display both the raw, un-encoded incoming video from the webcam, as well as the inbound streaming video after it has been encoded to H.264 in  Flash Player, sent to the server, and then back to the application. In addition, the metadata that you defined in the previous section needs to be displayed in the UI to reveal the encoding settings defined in publishCamera.

In this next section, you will work with two functions that have been provided for you; displayPublishingVideo line 121, and displayPlaybackVideo line 128, to play the streams and display the metadata on screen.

Create a new private instance variable named vid_out, and set its data type to Video. This new instance of the Video class will be used to playback the not-yet-encoded video coming in from the webcam. Be sure to import flash.media.Video:

Next, within the initConnection function, instantiate the vid_out variable by calling the constructor method of the Video class. Provide some layout information by assigning x a value of 300, and y a value of 10. Finally, add vid_out to the stage by passing it as an argument to addChild :

To allow the vid_out component to display video coming from the webcam, call the attachCamera method of the Video class, and pass that method the instance of the Camera class that represents the webcam:

If you run the application at this point, provided you have a webcam attached to your computer, you should see the Flash Player dialog that asks permission to access your camera. Grant Flash Player permission, and you should now see a live video feed coming from your webcam.

Next, you ll bring the video stream back from the server, and display it in another Video object.

Create a new instance variable named vid_in and type it as Video.

Next, locate the function named displayPlaybackVideo on about line 128. In the first line of the function body, instantiate ns_in, the NetStream variable you declared earlier, and set its initial value equal to new NetStream nc with the NetConnection nc passed as an argument.

protected function displayPlaybackVideo :void

Still within displayPlaybackVideo, instead of calling the attachCamera method, as you did for the previous NetStream, set the client property of the new NetStream to this.

On the next line, call the play method of the NetStream class, and pass it the String value for the name of the stream. This should be the name of the outgoing stream as well.

Next, within the initConnection function, instantiate the vid_in variable by calling its constructor. Set some sizing and layout properties for the new Video object so that it sits properly on the stage. Finally, add vid_in to the display list by passing it as an argument to addChild :

vid_in.x vid_out.x vid_out.width;

Then, back in displayPlaybackVideo function, attach the incoming NetStream to the Video object so that it can playback the video stream.

vid_in.attachNetStream ns_in ;

You should now see a dark rectangle appear that displays the video s encoding settings, and two video streams, side-by-side. The video on the left is the raw video footage coming from the webcam, and the one on the right is the stream coming back from the server.

The application now automatically attaches a webcam, displays the webcam video, encodes that video to H.264, delivers the video to a server via RTMP, and then streams that video from the server to the application.

Figure 2. Example Application showing live stream from webcam left and stream encoded to H.264 in Flash Player 11.0 right.

Currently Flash Player can encode audio using either the Nellymoser or Speex codec. This allows you to stream H.264/AVC video with either Nellymoser or Speex encoded audio to your server and thus web and desktop application, as well as devices that can ingest RTMP streams or HTTP Dynamic Streaming HDS and HTTP Live Streaming HLS  content with the use of the Adobe Media Server Live packaging capabilities. To note, at this time Flash Player cannot encode audio to the AAC or MP3 standards, which are required if you want to stream audio to iOS devices using HTTP Live Streaming HLS.

Congratulations. You ve just encoded a live video stream to the H.264 standard, all within the Flash Player. In the past this would ve involved the use of one or more separate desktop applications to produce the content, as well as a client-side application to ingest the stream. The new capabilities within Flash Player give you some very interesting options for creating high-definition video chat/conferencing applications, and other user-generated, HD video streaming solutions, in a very streamlined fashion.

Thanks to the new H264VideoStreamSettings class, your applications can now utilize the more efficient and higher quality encoding standard of H.264/AVC, instead of the default Sorensen Spark codec.

For an in-depth look into working with various H.264 encoding parameters, such as level and profile, check out Encoding options for H.264 video, by Jan Ozer on Adobe Media Center Developer Center.

To learn more about the new features in Flash Player 11 and AIR 3, check out Thibault Imbert and Tom Nguyen s presentation Changing the Game, from MAX 2011.

H.264 Is A Codec, Flash Is A Platform: One Can t Kill Off The Other. Dan Rayburn Monday May 3, 2010 AM Comments 18 Over the weekend I read another.

Supported codecs Flash Player. Adobe Community Help. Flash Player plays files containing H.264 and AAC that are derived from the standard MPEG-4 container.

XAVC is a recording format designed by Sony that uses level 5.2 of H.264/MPEG-4 AVC, and source code of an H.264 video codec called Flash Video; GXF;.

Our H.264/AVC Codec Package offers fast encoding and decoding speeds. The H.264 Decoder features extraordinary quality AVCHD, Adobe Flash, Silverlight and other.