|
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 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
|
