London
April 2005
Creating
Video Ads
Eyeblaster
The Rich Media
Platform
The basics of digital video
Video delivery methods
Video components
Video strip
Best Practices
Digital video is a sequence of Digital images that are
serialized based on a predefined timeline.
Digital image is a matrix of pixels.
A pixel is the smallest element in a digital image, holds the
digital color representation of a specific image location.
The process of producing digital video involves sampling live
or analog objects and storing the color samples digitally in
pixels, images and episodes.
Digital Video may be used in conjunction with a parallel audio
stream.
Digital Video
What is Digital Video ?
Digital video files size can be calculated as:
Episode duration (in sec) 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 BBP
30x30x640x480x32 = 8,847,360,000 Bits = 1054 MB !!!
(This doesn’t include audio)
Uncompressed video files are huge!
Digital Video
Uncompressed Digital Video
Bit rate is the speed at which data travels from one place to
another on computer network. This is usually measured in
Kilo Bits Per Second (Kbps).
Digital video bit rate is the amount of data stored in one
second of video.
The bit rate determines the minimum bandwidth
requirements that would guarantee smooth playing in
streaming.
Digital Video
Uncompressed Digital Video
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 in not possible.
Digital Video
Uncompressed Digital Video
We cannot serve uncompressed video files over the internet:
•
Storage problems.
•
Processing problems.
•
Bandwidth problems.
Digital Video
Uncompressed Digital Video
Many different techniques, many different formats.
Compression is the process of reduction of the video file size.
There are many factors that have impact on the result of a
compression:
Output dimension
Output frame rate
Key frame interval
Bit rate / quality
Audio parameters
Digital Video
Compressed Digital Video – how?
Video compression is usually done by choosing key frames
and calculating motion vectors in order to create the frames
between the key frames.
The Key frames are compressed directly from the source
movie, while the other frames are calculated according to the
last key frame and motion vectors.
Different techniques are used to eliminate “insignificant”
information that is not expected to be detected by a human
eye.
The process of compressing the video and creating the
movie in a compressed format is called Encoding.
The player will then have to decode the data in order to play
the video.
Digital Video
Compressed Digital Video – how?
Decoding Workflow:
-
-
-
Each Micro block is decompressed
in the exact opposite process to
the compression
“I” (Intra) frames are “Key” frames
were 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
Digital Video
Encoding Workflow:
The basics of digital video
Video delivery methods
Video components
Video strip
Best Practices
Video data needs to be available “locally” so that the player
will be able to process and play the video.
“Pre-Caching” is a method in which the video starts playing
only after it is fully downloaded.
“Pre-Caching” has huge load time, but smooth play is
guaranteed.
When using “Pre-Caching” - repeated plays would show
immediately with no additional bandwidth costs.
Delivery methods
Streaming vs. Progressive Download
The video player downloads the video in “packets”, organize
it in a buffer and pulls data from the buffer to display the
video frames.
Buffer size is usually small, which means a short loading
time, however play might be jumpy in cases that the buffer is
not filled quick enough (User’s bandwidth don’t 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 enable advanced
features such as seek and stream changes according to
bandwidth.
Delivery methods
“Streaming” allows to “display as you download”.
“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 methods
Progressive Download is the middle option between full
caching and streaming.
For our needs “Progressive Download” is usually the best
option.
Since there is no bandwidth dependency the quality is
usually better then 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 disadvantage in some
cases.
Delivery methods
Progressive Download - Pros
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.
Delivery methods
Progressive Download - Cons
Video components
The basics of digital video
Video delivery methods
Video components
Video strip
Best Practices
The video components let you easily download and display a
video, achieving the best possible quality.
In general - we recommend using a simple (light) asset as
the container for the video, and then loading the video by
using one of the video components.
In that case the video file will be configured as an additional
asset in the Eyeblaster interface.
Video components
It is possible to incorporate video into any of the Eyeblaster
formats.
SWF video loader
FLV streaming player
FLV progressive loader
Video components
Eyeblaster has 3 different video components:
Drag and drop the component onto the stage (frame 2 and
above).
Use the component’s API at least one frame after in which
you placed the component.
Verify that the component is defined through all the frames
you are using it. (It must be the same instance of the
component).
Video components
Video Components – General Instructions
This component is a video downloader that can
download a video which is embedded within a
separate flash movie.
The component is using 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.
Video components
SWF Video Loader
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 of Eyeblaster ads.
Video components
FLV Streaming Player
This component is a video downloader that can download an
FLV video.
The component is built based on the
MediaDisplay component that comes
with Flash MX (professional).
The component is using progressive
download to download the video.
You can achieve smooth play on
any bandwidth by using this component.
Flash 7 is required.
Video components
FLV 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 the same.
•
•
The video will be positioned in the position of the component
in the container movie.
The size of the video will be according to the additional asset
stage’s size.
Video components
SWF Video Loader - Exercise
We’ll use “myLoader” as the comonent’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.
Video components
SWF Video Loader - Initialization
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 case
automatic play is needed. Simply call
myLoader.videoLoadAndPlay instead of myLoader.videoLoad with the
same set of parameters.
Video components
SWF Video Loader - Loading
Call the play API to start/resume the play of the video:
myLoader.videoPlay();
Call the pause API to pause the video:
myLoader.videoPause();
Call the stop API to pause the video:
myLoader.videoStop();
Video components
SWF Video Loader - Playing
Call the mute API to toggle the mute state of the video:
myLoader.videoMute();
Call the setMute API to set the mute state of the video:
myLoader.videoSetMute(true); - MUTE is ON
OR
myLoader.videoSetMute(false); - MUTE is OFF
Call the setVolume API to set the volume of the video:
myLoader.videoSetVolume(level); - level is an integrer (0-100)
Video components
SWF Video Loader – Sound Control
Video Exercise
Creating Video Ads
The basics of digital video
Video delivery methods
Video components
Video strip
Best Practices
The video strip 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 video strip panel.
Video strip
The video strip feature allows you to easily create a video
teaser that expands on mouseOver or user click.
Using the Dynamic Mask 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
Video strip
DynamicMask 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);
Video strip
DynamicMask Component
The component’s position and size defines the strip
position and size.
When the strip expands it’s always to the full stage size.
The DynamicMask component must be set on the lowest
layer of the movie, so that it won’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).
Video strip
Important Notes
The basics of digital video
Video delivery methods
Video components
Video strip
Best Practices
For 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 – will include a progress bar or animation
while the video loads.
The video as an additional asset.
We recommend using the SWFLoader component.
Best practices
Commercial Break
At least 3 ads should be created for different bandwidth:
modem users (or video unsupported users), 100 Kbps, 300
Kbps.
Note that as long as the video’s bit rate match the user’s
bandwidth the initialization of the video should be short.
Follow the same recommendations for “appear on next page”
option.
In general we will prefer using the video components and not
embedding the video into the main flash asset, as the
components can guarantee smooth playing of the video.
Best practices
Commercial Break
If the video is user initiated in the panel, we will follow the
same recommendations: the panel will be the video container
and we’ll have an additional asset with the video.
For cases that the panel should only be opened when the
video is ready we recommend to use the same approach only
use 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 then 600K).
Best practices
Expandable Banner
Same recommendations as for the expandable banner,
only this time the video is part of the rich flash instead of
part of the panel.
Best practices
Polite Banner
In general you wouldn’t use streaming for video ads.
Few examples in which you’ll use streaming are:
Site only allow streaming video content.
Rights issues – streaming is the best approach.
Two way control is required.
Very long video (usually not the case for video ads).
Best practices
When do I Use Streaming?
Have any more suggestion for
us how to make your life
easier?
Just send us an email and
maybe you’ll see it in our next
version
Creating
Video Ads
London
April 2005
Question???