Mote Interactive

Video Delivery Tutorial

Intro

We'll look at three ways to deliver video online: embedded Quickime, embedded Window Media Video, and Streaming RealVideo.

Embedded QuickTime

How should video be delivered online? The easiest way is to take whatever source video you have, dump it onto your server, and wrap it in HTML that embeds it into the page:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="256" codebase = "http://www.apple.com/qtactivex/ qtplugin.cab#version=6,0,2,0">
<param name="controller" value="TRUE">
<param name="type" value="video/quicktime">
<param name="autoplay" value="true">
<param name="src" value="clay.mov">
<param name="pluginspage" value="http://www.apple.com/quicktime/ download/indext.html">
<embed width="320" height="256" controller="TRUE" target="myself" src="clay.mov" type="video/quicktime" bgcolor="#000000" border="0" pluginspage = "http://www.apple.com/quicktime/
download/indext.html"> </embed></object>

Let's break that down:

<object></object> The video is embedded in your browser as an object. The classid parameter identifies what kind of object you're embedding. If you're going to include a controller, add 16 pixels to the height of your object. The codebase is the plug-in source.

<param name="controller" value="TRUE"> Probably best to include it. It also provides feedback to the user re: downloading.

<param name="type" value="video/quicktime"> If the object classid wasn't specific enough, here it is again.

<param name="autoplay" value="true"> Self-explanatory.

<param name="src" value="process34.mov"> This is the location of the object.

<param name="pluginspage" value="http://www.apple.com/quicktime/
download/indext.html"> The page to send users to when they click on your broken plug-in link.

<embed width="320" height="256" controller="TRUE" target="myself" src="process34.mov" type="video/quicktime" bgcolor="#000000" border="0" pluginspage= "http://www.apple.com/quicktime/
download/indext.html"> </embed> A seemingly redundant tag, but included for older browsers that don't have HTML 4 compliance.

You could do it with just the embed tag, but test it out on the browsers you need it to work on before you send your client the bill.

 

You should also provide a jpeg placeholder for the video. This will serve as a button that the user presses to initiate the downloading. Don't put video on your index page (or any other page) and start a huge video download without the consent of the user (unless they've just clicked a button or link taking them to a clearly understood Video Page).

To create a placeholder, take a frame from the video that gives a good idea of what the content of the video is about. Either export this frame (if your video player allows that), or screen capture and create a jpeg the same size as the video.

CLICK to view VIDEO

CLICK jpeg to view VIDEO (3.4MB)

To swap the placeholder jpeg with the video requires the following Javascript.

Create a function like the following and put it in your <head> tags. Make sure you localize the two bolded parameters.

<script language="JavaScript">

function swapToVideo(){ // the function name
vid.outerHTML= '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="256" codebase= "http://www.apple.com/qtactivex/
qtplugin.cab#version=6,0,2,0"> <param name="controller" value="TRUE"><param name="type" value="video/quicktime"> <param name="autoplay" value="true"><param name="src" value="clay.mov"> <param name="pluginspage" value="http://www.apple.com/quicktime/
download/indext.html"> <embed width="320" height="256" controller="TRUE" target="myself" src="clay.mov" type="video/quicktime" bgcolor="#000000" border="0" pluginspage= "http://www.apple.com/quicktime/
download/indext.html"> </embed></object>';

} // end of function
</script>

The next part is blocking out the part you want to remove with a div tag. In this case, we're removing both the jpeg and the instructions below it. Not the bolded JavaScript function we've inserted inside the <img> tag.

<div id="vid">
<p class="moteinteractive"><img onClick="swapToVideo()" src="jpegs/clay.jpg" alt="CLICK to view VIDEO" width="320" height="240"></p>
<p class="moteinteractive">CLICK to view VIDEO (4.75MB)</p></div>

What this does is swap the HTML you have currently with the value of vid.outerHTML in the function above (starting with "<object classid" and continuing to the end of "</embed></object>").

next >>> Embedded Windows Media Video
MORE TUTORIALS