Site Title Image

Video



Embedding a "Looping" Video in a Web Page

 

  Ever wanted to add a tiny video to your page, much like the animated photos in newspapers in the Harry Potter movies? It's easier than you might think.

You will need:

  • A camera capable of taking a video, such as a Flip video camera, or a digital camera with a movie mode.
  • Any Video Converter - a program that will be used to convert your video to a format that can be embedded in a Web page. This free program is available to NISD employees who submit a technology workorder requesting installation of the program.

Overall Process:

  1. Create your video and save it to your computer. It will probably be in .AVI or .MP4 format.
  2. Convert the video -- using Any Video Converter -- to .SWF (pronounced "swiff") format.
  3. Upload the video to somewhere that has an Internet address. The video will be too large to store on the CMS Outreach system.
  4. Embed the video in a Web page.

Creating the Video

Many inexpensive digital cameras can create a video that is of suitable quality for our project. Compact video cameras, such as the Flip Video cameras, are ideal for this type of video.

Look for a subject that lends itself to a short video that will play over and over. It may be something simple, such as a flag waving in a breeze, or a brief-but-dramatic science project in a lab or classroom. It could also be a demonstration of a process, such as changing your password in Groupwise, or removing and shaking a printer toner cartridge.

It should also be a subject that will work without sound. Sound in Web pages can be extremely annoying, especially for repeat visitors to your page.

Once your video is recorded, save it to your computer, using a USB cable or by inserting the SD card into the appropriate slot in your laptop.

Converting the Video to SWF Format

  1. Open Any Video Converter.
  2. Select the Add Video button in the upper-left part of the screen. Any Video Converter: Add Video
  3. Browse for your video and select it. Click the [Open] button. The filename of your video should appear in the white area in the middle of the screen.
  4. In the upper-right, choose Flash SWF from the drop-down list. Select Output Format
  5. Select Frame Size
    pic
    In the area below the preview screen, scroll down to find the Frame Size and make a selection. The 320x240 size was used in the example on this page.
  6. Scroll down further below the preview screen, to Disable Audio. Select Yes from the drop-down menu to turn off the video's sound.
  7. Click the Convert button near the top of the screen to make a copy of your video in SWF format. The program should open a Windows Explorer window to show where the SWF video was saved.

Uploading the SWF Video

The SWF video needs to be uploaded to somewhere that has an Internet address, so that it can be linked from your Web page. A campus CIT may place the video somewhere in the campus website, or you may use one of the many "Web 2.0" services for storing your video.

The video shown on this page is approximately 1.3 MB in size.

Embedding the Video in a Web Page

  1. Open the tool that you use to edit your Web page (most likely CMS Outreach or Dreamweaver).
  2. Go into the HTML view. In CMS Outreach, there is an HTML button at the bottom of the editing window.
  3. Locate the place in the code where the video will be inserted.
  4. Type the HTML code in the box below to embed your video in the page:

<embed src="a" width="b" height="c" align="d"></embed>

Where:
a is the URL (Internet address) of the video
b is the width of the video in pixels
c is the height of the video in pixels
d is either left or right. The video on this page was aligned to the right.

That's it!
You now have a video embedded in your Web page. It will run automatically as long as the visitor is viewing your page.

If you wish to use the video on this page in training, or to try embedding a SWF video, its address is:

http://www.nisd.net/technology/training/brown/media/sappho_drinks_water.swf