Back to the Basics - Video

Nick Kwiatkowski

Michigan Flex Users Group

Welcome to Back to the Basics

• Part II of the series.– November’s recording is on our website at

http://www.theFlexGroup.org– This month’s recording (assuming everything

records OK) will also be available on our site

• This month we will be focusing on writing a simple video app– Stream videos from a server using HTTP– “Jukebox” like interface.

About Video

• As you probably already know, video is a big thing on the web– 80% + of video served on the internet is

served with Flash or Flex– 90% of all HD video is served with H.264

• 3 ways to serve Flash video:– Red5 or Flash Media Server (RTMP)– HTTP/s Streaming– Local disc access (embedded or via AIR)

About Video

• Video Formats– The Flash player knows of three basic video

formats:• SWF – video files that are compiled to Flash

format. No buffering – old way to do it• FLV – Flash Video offers some buffering, OK

performance, but very widely deployed.• H.264 (MP4) – HD video, HD sound. Good

compression, but limited cue point support and requires recent Flash Player

Encoding Video

• In order to serve any type of video, you need to encode it to be ready for the web.– If you have Premier, Flash or After Effects,

you also get a program called Adobe Encoder CS. Will show demo of this.

– Many programs can save to MP4 (H.264) or FLV format natively.

– Flash Media Server can do some encoding on the fly. Certain Linux tools can do this too.

ENCODING A VIDEO

Serving the Video

• Local Disk Access– Simply include the FLV or MP4 video in your

project. Easy, but limiting. Can use VideoDisplay component.

• HTTP Streaming– Place the video files on your HTTP server.

Unfortunately you need to manually setup a NetStream and NetConnection component.

Serving the Video

• Flash Media Server– Very expensive, but allows for really neat

setups. Live video streaming, and smart objects.

– Uses aliases for videos channels, similar to LCDS or BlazeDS, to simplify the configuration.

– Dynamic Buffering– Video files can be stored on server, or cluster.

Metadata

• Video producers can include additional metadata in video. You can read these things!– Closed Captioning– Cue-Points– In-band Advertising– Duration, Codecs, Audio channels, etc.

Making the App

1. Design the UI1. List for video selection

2. 3 Buttons (Play, Stop, Camera)

3. Slider (for seeking)

4. Video Component (via ActionScript)

2. Connect the Web Service to get video list

3. Implement the NetConnection, NetStream and Video components

Making the App

4. Implement the Metadata and variables

5. Write ActionScript to connect it all up!

LETS GET INTO THE CODE!