CDM100

Video Formats and the Video Formats and the WebWeb

Video Compression and delivery methods via Flash 8

Video Standards and FLVs

Ref: Macromedia – Developer Center: Flash Video Learning Guide

CDM100

Video StandardsVideo Standards

• Television Standards– Established in the 1950s when colour television

was inverted

• NTSC (National Television System Committee)

– Used in America (North and South) and Japan

• PAL (Phase Alternating Line)

– Used in Europe, Australia, Middle East and Asia

CDM100

Televisions & MonitorsTelevisions & Monitors

• Conventional televisions are made up of horizontal lines which refresh quickly to show a moving image– NTSC is 525 lines– PAL is 567 lines

• Computer Monitors are made up of pixels– Often of a higher resolution

than PAL or NTSC

CDM100

Capturing VideoCapturing Video

• Capturing VHS using a video capture card– NTSC: The 525 lines are represented by 720 x 486 pixels

– This video size is often termed D1– PAL: The 576 lines are represented by 720 x 526 pixels

• Capturing Digital video – i.e. IEEE1934 Firewire and Digital Video Camera– NTSC is represented by 720 x 480 – This video size is

term DV– PAL is represented by 720 x 576– Both NTSC and PAL DV have frame sizes which are

multiples of 16. This is because most compression algorithms work on blocks of 16 x 16 pixels

CDM100

Pixel Aspect RatioPixel Aspect Ratio

• NTSC and PAL specifications specify non-square pixels (rectangular)

• Computer Monitor pixels are square• Most Video Applications scale the video to

compensate– For example:

• PAL D1 720 x 526 will display as 768 x 576 DV (Square pixels) (Horizontal Compensation)

• The pixel Aspect Ratio is 1.067 for PAL D1 to PAL DV

i.e. 720 x 1.067 = 768

as images have a 4:3 ratio (3 x 768) / 4 = 576

CDM100

Frame RateFrame Rate

• The number of images per second shown to give the illusion of motion

• PAL frame rate: 25 fps (frames per second)

• NTSC is 29.97 fps– There are really 30 fps in NTSC but they run 0.1

percent slower in real time– This was done to ensure backward compatibility

with black and white television sets of the time

CDM100

Display FormatDisplay Format

• Interlaced Video– Due to the speed of the technology of the time it was not

possible to draw a full frame without a noticeable flicker– The solution to this problem was to break the image

(frame) into two fields and display one after the other

• Progressive Video– A modern standard used in High Definition television– Each image is drawn in one pass – from top to bottom

CDM100

Video CompressionVideo CompressionThe basic principle of video compression CODECs (algorithms)

are based around the use of keyframes and delta frames.

Original uncompressedVideo

Images/frames

Keyframes – a full uncompressed image

Delta frames – these contain only the information about pixels that have changed from the previous frame

CompressedVideo

CDM100

Video and Flash (8)Video and Flash (8)

• Flash version 8 has an inbuilt video codec called On2 VP6

• Earlier versions of Flash (6 and 7) used the Sorenson Spark codec

• You can use Flash to both create video and as a tool to deliver video (to computers, mobile phones, PDAs etc)

CDM100

Creating VideoCreating Video• Any movie you create in Flash an be exported as a AVI or

Quicktime– File > Export > Export Movie…

• This allows multimedia developers to create animations or bespoke video effects

• Example (1): Using PhotoShop and Flash to create a movie

From static imageto Flash animationto video

In class demojpeg

CDM100

Delivering Flash VideoDelivering Flash Video

• There are 3 methods to deliver video using Flash– Embedded Video– Progressive FLV– Streaming FLV

• All methods share the same goal which is to deliver video in format which will work on the client machine (regardless of operating system and hardware etc.)

CDM100

Embedded VideoEmbedded Video

• The video is imported and placed on the timeline

• The Frame Rate of the video file and Flash movie must be the same

• You have timeline access to the video clip– This means you can treat the video like any other

Flash object– For example: You could add interactions to

video (e.g. invisible buttons over the video file)

CDM100

Progressive FLVProgressive FLV

• FLV files are a Flash Video format– i.e. you use the Flash 8 Video Encoder to create the FLV

• The video file is stored externally to the Flash SWF file

• The video only plays at runtime• FLV files are progressively downloaded, cached

and played from the local disk• There are special ActionScript functions which

permit you to control the video – e.g. netStream, Load, Play, Pause, Seek

CDM100

Streaming FLVStreaming FLV

• FLV files are streamed from a Flash Media Server (this is hosted on Web server etc.)

• Many features are the same as progressive FLV

• Main advantages – the user doesn’t get a local copy!– Possible to capture live video from webcams /DV

cameras– Also, permits multiway video applications to be

developed

CDM100

Example (2): Example (2): Flash -Embedded Video Flash -Embedded Video

• Step 1 select File > Import

Find the videofile you haveAlreadycreated

Step 2

CDM100

Example (2): Example (2): Flash -Embedded VideoFlash -Embedded Video

Step 3:Select the deployment methodNote: Unless you have access to a Flash Communication ServerYou can only really pick Progressive or Embed

CDM100

Example (2): Example (2): Flash -Embedded VideoFlash -Embedded Video

Step 4: Pick the symbol typeDefault is Embedded videoOther options Movie Clip etc

Step 5: Select if you want to have the audioLinked to the video or separate

CDM100

Example (2): Example (2): Flash -Embedded VideoFlash -Embedded Video

Step 6: Decide how much you want to compress the video

CDM100

Example (2): Example (2): Flash -Embedded VideoFlash -Embedded Video

Flash now compresses the video- This can take some time forlonger movies!

Step 7: Add the video to the stage and publish the movie

Step 8: Load the HTML file in a web browser

CDM100

Example (3): Example (3): Flash -Progressive VideoFlash -Progressive Video

The same process as example 2 except Flash creates a .FLVVideo file which is stored externally from the Flash .fla and .swf files

You do get the option to add a set of video controls- this can be added or removed using the properties inspector