The Leader in Secure Video Delivery Software
Home

Creating a Clipstream™ Video Banner
Using a light 6k Clipstream™ Video applet a banner ad (or any ad for that matter) can have any rectangular region play video of any length.

Click to visit the official Shadow of the Vampire site
Click on the Image to the left to launch the Shadow of the Vampire trailer!
This banner was created to promote the Lions Gate film: "Shadow of the Vampire".

In the example above, the region in the middle with the album covers plays streaming video when the user enters the page (a 'light loading' version serves up the video when the user clicks on the video static image). This is accomplished by placing a a special Clipstream™ Videoapplet between the graphic regions (.gifs or .jpgs) to the left and right of the film trailer. The static state of the video is a graphic that is loaded by the applet itself.

The Clipstream™ Video applet has code for calling the Clipstream™ Video trailer clips as well as code for governing the behaviour of the clips such as telling the applet to play the video automatically or to wait for a click as well as defining URLs that will open on a time setting. Any parameter that can be set for normal Clipstream™ Videos will work in an advertisement.

Constructing the Clipstream™ Video Banner
The banner was constructed in four steps. First, the graphics and layout were designed in Photoshop. Using Photoshop 6's slice options, the interactive regions were separated from non-interactive regions. The interactive region is defined as the total size of the largest format video to be streamed. It was then exported as jpgs, gifs and HTML containing the table within which the banner is defined. A screenshot of the video or a static image that will appear over the applet should also be defined in Photoshop.

Secondly, the video was encoded using the Clipstream™ Video Encoder. The Encoder exported Clipstream™ Video compressed files (in the various versions to match the different bandwidth users) and also gave an option to produce the needed applet code with the correct file names inserted.

In the table containing the banner, the sliced region where the video trailer would play was cut out and replaced by the applet code. The applet code width and height will correspond to the missing graphic to keep with the banner design. In the example above, the static image (Lions Gate title screen) was cut out. The applet code is then pasted into that space.

Upload checklist  
1. videoclipstream.zip player
2. HTML page
3. All graphics
4. .vcs video files

In the final step, all the graphics (including the rollover graphics), the page containing the table with the banner and embedded applet, and the Clipstream™ Audio files are uploaded to the remote server. The banner was tested for audio and appearing graphics.

Also See:




Go to Java.com Go to dsny.com