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.