Embedding Video - Implementation
So, you want to put visual media on your
page? It's easier than you might think, so long as you already have the video.
This tutorial is how to get visual media into a web page, not into a computer,
so this won't help with that. If you have a video file you want to embed into a
web page, this is it.
You can embed virtually any kind of media
into a web page, but the user must have a plug-in to view it in order for it to
work. QuickTime and AVI files are commonly used because of their great
compatibility. RealMedia files also are commonly used, but sometimes have
compatibility issues because of buggy players and plug-ins not recognizing
their own media format.
For now we will simply focus on getting the
file in the browser, not where to put the file on the page or what to put
around it. The best way to do this is to make a blank HTML page with code like
this:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Now we'll make up a custom <embed>
tag for your media. Put this tag between the <body> tags and be
sure to have your video in the same directory.
Here are the attributes you can use on the
embed tag and what they mean:
Embed Tag Reference |
||
Attribute |
Example |
Description |
autostart |
true |
Whether
or not to start the file upon loading. |
bgcolor |
#000000 |
Specifies
color of embed area. |
border |
10 |
Puts a
border around the file. |
controller |
true |
Give the
file playback controls or not. |
height |
150 |
Height of
embedded file. |
hidden |
false |
Hides the
file (for sound files). |
loop |
true |
Whether
or not to loop the file. |
pluginspage |
(web
page) |
Where to
download a plug-in if it's missing. |
src |
filename.mov |
Name of
the embedded file. |
width |
150 |
Width of
embedded file. |
Here is an example of the tag with all of
its attributes:
<embed
autostart="true" bgcolor="#000000" border="10" controller="true"
height="150" hidden="false" loop="true"
pluginspage="http://www.apple.com/quicktime/download/indext.html"
src="filename.mov" width="150">
Obviously we won't need all of those to make
a video show up, so let's just use the bare essentials. Make your embed tag
look like this:
<embed src="filename.mov"
autostart="true" controller="true"
hidden="false">
Replace filename.mov with the name of your
movie and it should show up. This is all you have to do, the rest of the
attributes are just options. Some people like to use tables or other tricks to
make nice layouts or borders around their movies. To learn how to do this,
check out the next page of our tutorial, Layout.
Embedding Video - Layout
So you've implemented your movie into your
page, but want to know where you should put it? Or some tricks to make it look
good? What we're about to show you is called image splicing, and with some
table and graphics editor knowledge it's very possible, but it isn't for the
beginner.
To get started, open your favorite image
editing program, we'll be using Photoshop for the tutorial, and create a new
file. Make it the same dimensions as your movie is, for instance if your movie
is 250 x 200, make your image that size as well. Now fill the image with black,
or another distinguishable color other than white.
Now increase your "canvas size".
If you want lots of stuff around your movie, make it about 200 pixels bigger
than the movie in both height and width. For a little less, use around 100. Now
the area that is not the square that the movie will be in can be drawn in or
objects can be inserted.
You should end up with a picture that looks
something like the one below, with your own graphics around the movie space.
Now we have to split the image up so that we
can put the smaller ones around the movie with a table. They should be split
like the one below.
Now we'll have to put the code together to
make this work. Its a simple table:
<table border=0 cellpadding=0
cellspacing=0>
<tr>
<td colspan=3 align="center">
<img src="image1.gif">
</td>
</tr>
<tr>
<td>
<img src="image2.gif">
</td>
<td>
<place your embed tag here>
</td>
<td>
<img src="image3.gif">
</td>
</tr>
<tr>
<td colspan=3 align="center">
<img src="image4.gif">
</td>
</tr>
</table>
That should wrap it up, these can be touchy
and may not work in every browser, if yours didn't work out just right, e-mail us.