LondonLondonApril 2005April 2005

Creating Creating Video AdsVideo Ads

The Rich Media The Rich Media PlatformPlatform

EyeblasterEyeblaster

The basics of digital The basics of digital videovideoVideo delivery methodsVideo delivery methodsVideo componentsVideo componentsVideostripVideostripBest PracticesBest Practices

What is Digital Video ?What is Digital Video ?

Dig

ital V

ideo

Digital video is a sequence of digital images that are serialized based on a predefined timeline.

A digital image is a matrix of pixels.

A pixel is the smallest element in a digital image; holds the digital colour representation of a specific image location.

The process of producing digital video involves sampling live or analogue objects and storing the colour samples digitally in pixels, images and episodes.

Digital Video may be used in conjunction with a parallel audio stream.

Uncompressed Digital VideoUncompressed Digital Video

Dig

ital V

ideo

Digital video file sizes can be calculated as:Episode duration (in secs) x Frame rate (FPS) x Frame height (pixels) x Frame width (pixels) x Pixel memory size (BPP)

Let’s take a video commercial:30 seconds duration, 30 FPS, 640x480 pixels, 32 BBP30x30x640x480x32 = 8,847,360,000 Bits = 1054 MB !!!(This doesn’t include audio)

Uncompressed video files are huge!

Uncompressed Digital VideoUncompressed Digital Video

Dig

ital V

ideo

The bit rate is the speed at which data travels from one place to another on a computer network. This is usually measured in Kilobits Per Second (Kbps).

The digital video bit rate is the amount of data stored in one second of video.

The bit rate determines the minimum bandwidth requirements to guarantee smooth playback when streaming.

Uncompressed Digital VideoUncompressed Digital Video

Dig

ital V

ideo

Bit rate calculations:Frame Rate (FPS) x Frame Height (pixels) x Frame Width (pixels) x Pixel Memory Size (BPP)

For video commercial:30x640x480x32 = 281 Mbps

Streaming uncompressed digital video is not possible.

Uncompressed Digital VideoUncompressed Digital Video

Dig

ital V

ideo

We cannot serve uncompressed video files over the internet:

• Storage problems.

• Processing problems.

• Bandwidth problems.

Compressed Digital Video – Compressed Digital Video – how?how?

Dig

ital V

ideo

Many different techniques, many different formats.

Compression is the process of reducing the video file size.

There are many factors that impact the result of compression:

Output dimension

Output frame rate

Key frame interval

Bit rate / quality

Audio parameters

Dig

ital V

ideo

Encoding Workflow: Decoding Workflow:

- Each Micro block is decompressed in the opposite process to the compression

- “I” (Intra) frames are “Key” frames compressed directly from a real source frame

- “P” (Predicted) frames are created from an “I” frame + a motion vector

- “B” (bi-directionally interpolated) frames are artificially created to smooth the motion and increase the frame rate

The basics of digital The basics of digital videovideoVideo delivery methodsVideo delivery methodsVideo componentsVideo componentsVideostripVideostripBest PracticesBest Practices

When using “caching” a complete download of the video file is performed prior to playing the video

“Streaming” allows to “display as you download”.

The video player downloads the video in “packets”, organizes it in a buffer and pulls data from the buffer to display the video frames.

Buffer size is usually small, which means short loading time, however play might be jumpy in cases that the buffer is not filled quick enough (User’s bandwidth does not match the movie’s bit rate).

In Streaming we have a 2 way communication between the client and the server, which means that instructions from the client can be sent to the server – this enables advanced features such as seek and stream changes according to bandwidth.

Delivery

m

eth

od

s

Streaming vs. Progressive Streaming vs. Progressive DownloadDownload

Progressive Download is the middle option between full caching and streaming.

“Progressive Download” (also known as “http streaming”) takes the video size into consideration when determining the buffer size.Buffering continues until the remaining download time is shorter then the movie play time.

Delivery

m

eth

od

s

For our needs “Progressive Download” is usually the best option.

Since there is no bandwidth dependency the quality is usually better than in streaming.

Simple setup – as there is no need for a streaming server.

Local storage of files – after the user views the video, the file is stored in the local’s computer internet cache. The user can view the movie again without having to download it each time.Note that this may be perceived as a disadvantage in some cases.

Progressive Download - ProsProgressive Download - Pros

Delivery

m

eth

od

s

Local storage restricts the streams to short or moderate length files.

The viewer does not have random access into the stream until the movie is fully loaded (can’t implement seek features).

Can’t be used for live event streaming.

Progressive Download - ConsProgressive Download - Cons

Delivery

m

eth

od

s

The basics of digital The basics of digital videovideoVideo delivery methodsVideo delivery methodsVideo componentsVideo componentsVideostripVideostripBest PracticesBest Practices

Vid

eo

com

pon

en

ts

It is possible to incorporate video into any of the Eyeblaster formats.

The video components let you easily download and display a video, achieving the best possible quality.

Eyeblaster offers 3 different video components:

SWF video loader

FLV streaming player

FLV progressive loader

Vid

eo

com

pon

en

ts

This component is a video downloader that can download a video which is embedded within a separate flash movie.

The component uses progressive download to download the video.

You can achieve smooth play on any bandwidth by using this component.

Flash 6 is required.

Eyeblaster recommends using this component for most cases.

SWF Video LoaderSWF Video Loader

Vid

eo

com

pon

en

ts

This component is a streaming video downloader and player.

Flash communication server is used for storing and streaming the video files (format FLV1.1)

Smooth playback is not guaranteed unless a bandwidth detection is used properly.

Flash 6 is required for downloading and playing the video.

Flash 7 is required for controlling the audio.

Streaming is recommended for very long videos, which is usually not the case with Eyeblaster ads.

Vid

eo

com

pon

en

ts

FLV Streaming PlayerFLV Streaming Player

This component is a video downloader that can download an FLV video.

The component is based on the MediaDisplay component deliveredwith Flash MX (professional).

The component uses progressive download to download the video.

You can ensure smooth playback on any bandwidth by using this component.

Flash 7 is required.

Vid

eo

com

pon

en

ts

FLV Progressive LoaderFLV Progressive Loader

When using this component, we should create 2 flash assets:

• Container – will use the SWFVideoLoader component.

• Additional asset – video embedded inside a flash asset.

• The frame rate of the 2 assets should be similar.

• The position of the component will determine the position of the video.

• The size of the video will correspond to the stage size of the additional asset.

SWF Video Loader - ExerciseSWF Video Loader - Exercise

Vid

eo

com

pon

en

ts

We’ll use “myLoader” as the component’s name.

Define a callback for getting video progress: onProgress(bufferProgress, loadProgress,playProgress)

Set the callback: myLoader.videoSetProgressEventHandler(onProgress);

The sound is OFF by default. You can change the MUTE status and set the volume at the initialization stage in order to start the video with sound ON.

Vid

eo

com

pon

en

ts

SWF Video Loader - SWF Video Loader - InitializationInitialization

Call the load API: myLoader.videoLoad(videoURL, frameRate, riskFactor);For example: myLoader.videoLoad(_root.ebMovie1, 15, 0.1);

You can optionally call the loadAndPlay API in cases where automatic play is needed.

Simply call myLoader.videoLoadAndPlay instead of myLoader.videoLoad with the same set of parameters.

Vid

eo

com

pon

en

ts

SWF Video Loader - LoadingSWF Video Loader - Loading

Video ExerciseVideo Exercise

Creating Video Ads

The basics of digital The basics of digital videovideoVideo delivery methodsVideo delivery methodsVideo componentsVideo componentsVideostripVideostripBest PracticesBest Practices

The videostrip feature allows you to easily create a video teaser that expands on mouseover or user click.

The videostrip should be configured in the Eyeblaster interface as a panel of an expandable banner. Note that as in the example, the strip can cover the banner, creating an effect of a video banner that expands.

You should use the “DynamicMask” component with any of our video components in order to create a videostrip panel.

Vid

eo

str

ip

Using the DynamicMask component API you can easily do the following:

Show only a short part of the movie (teaser) in a loop when the strip is shown. myMask.setVideoLoop(5); - 5 sec loop

Set the expand/retract time. myMask.setExpandTime(1); - 1 sec

Vid

eo

str

ipDynamicMask ComponentDynamicMask Component

Video can be set to MUTE automatically when only the strip is shown and be played with sound when expanded. myMask.setAutoVideoMute(true);

Callbacks for expand and retract can be set by the user. myMask.onExpand = function () { … }; myMask.onRetract = function () { … };

Different effects can be set to the expand/retract transitions. myMask.setEaseIng(Regular.easeInOut);

Vid

eo

str

ipDynamicMask ComponentDynamicMask Component

The component’s position and size defines the strip position and size.

When the strip expands it is always to the full stage size.

The DynamicMask component must be set on the lowest layer of the movie, so that it doesn’t block other buttons on the stage.

Testing the component can be done in the flash editor.

You cannot test a video strip asset in “Preview Asset”. Retract onMouseOut will only work in Preview Ad (and only for the expandable banner format).

Vid

eo

str

ipImportant NotesImportant Notes

The basics of digital The basics of digital videovideoVideo delivery methodsVideo delivery methodsVideo componentsVideo componentsVideostripVideostripBest PracticesBest Practices

For the commercial break format the speed is very important and the video is usually short (10-15 sec)

We recommend that the ad will be created from 2 resources:

Container – this includes a progress bar or animation while the video loads.

The video as an additional asset.

We recommend using the SWFLoader component.

Best

pra

cti

ces

Commercial BreakCommercial Break

We recommend that different ads are created for different bandwidths.

Note that as long as the video bit rate matches the user’s bandwidth, the initialization of the video should be short.

Follow the same recommendations for the “appear on next page” option.

In general we recommend using the video components and not embedding the video into the main flash asset, as the components can guarantee smooth playback of the video.

Best

pra

cti

ces

Commercial BreakCommercial Break

If the video is user initiated in the panel, we follow the same recommendations: the panel will be the video container and we’ll have an additional asset with the video.

For cases where the panel should open only when the video is ready, we recommend using the same approach but with a mask to make the panel transparent while the video is loading.

Another option is to embed the video inside the panel and use “ebShowWhenReady” fscommand. We only recommend this when the video is very light (less than 600K).

Best

pra

cti

ces

Expandable BannerExpandable Banner

In general you wouldn’t use true streaming for video ads.

Examples where true streaming should be used:

Site allows only streaming video content.

Copyright issues – streaming is the advised option.

Two way control is required.

Very long video (usually not the case for video ads).

Best

pra

cti

cesWhen Should True Streaming be When Should True Streaming be

Used?Used?

QuestionsQuestions LondonLondonApril 2005April 2005

Creating Creating Video AdsVideo Ads