How do I add video to my Website?

Thanks to Anna at Engage Media for help in figuring this out.


Useful sites:


Below are the conceptual steps to take when publishing video on the Internet.

  • Export your video from your video editing software into a standard format: Everyone uses a different program to create or edit their videos, however, all video editing programs have the ability to export your finished product to a file. The format of the file is not important, provided it is a standard format.
  • Prepare your video. Typically, your exported video will be huge - too big to upload to the Internet. Your next step is to convert it into a file suitable for upload. There are two approaches:
    • Automatic - Ideally, your web site will be setup to accept video files and automatically convert them into a format that will play for users. If that's the case, your preparation step is to simply convert your native format file (which will likely be very large) into a smaller file that can reasonably be uploaded to your web site (for example, the xvid format). See below for details on how to convert a file from one format to another. Once you have made the conversion, you simply have to upload the file using your web site's existing upload methods.
    • Manual - If you want to know the details of how video conversion works (or you are the web administrator trying to figure out how to make it automatic), you may want to go through the manual steps to familiarize yourself with the process. Below is an overview of the different approaches you can take. There are several ways to play video on a web site:
      • Simply provide an anchor link to the raw video file. Depending on the format of the file, most browsers will try to stream it, however it will probably not be the best user experience. Many browsers will simply prompt the user to download the file.
      • Use the object or embed tags. These tags allow you to place video of a variety of formats into your web page, however, provided only limited options for users to control the video.
      • Use a flash player written in javascript (like the free Flow Player). This approach is the most common, but will only play videos saved in the flash (flv) format.
      • Use the video tag. Firefox/Iceweasel version 3.1 will come with built-in support for the free ogg/theora video format. That means you will only need to convert your file into an ogg/theora format and it will stream automatically with Firefox/iceweasel using the video tag like you now use the img tag. No need for a flash player and no need for a proprietary flash format.
      I would currently recommend: using a flash player and providing a link to the ogg file for users to download.

Real working examples of file conversion


Linux users, you can use ffmpeg; Linux, See Engage Media tutorial for details on the settings.

Here's an example of using mencode on a raw m4v file to convert it to a smaller xvid encoded file that would be suitable for uploading to a web site that could automatically convert it into a playable format:

mencoder -oac mp3lame -lameopts abr:br=92 -ovc xvid -xvidencopts bitrate=150 video-file.m4v -o video-file.avi

Given the complexity of mplayer/mencoder (it does a lot of things), I found ffmpeg to be much simpler to use.

Here's an example of converting a file created by the flip video camcorder directly into a playable flash file. The flip video camcorder uses a wide aspect ratio (1280 x 720) - with the -s 640x360 option I'm preserving the aspect ratio, but cutting it in half to make it smaller. In addition, the flip video camcorder by default has a high bit rate of 10,455 kb per second. I'm reducing the bit rate to 1,500 kbits (with -b 1500k) after experimenting with the best quality to size ratio.

ffmpeg -i in.mp4 -s 640x360 -b 1500k out.flv

I was not able to get ffmpeg to produce a patents-free theora ogg file, so instead I used ffmpeg2theora, which sadly has completely different arguments. The following produced an ogg video file directly from the original:

ffmpeg2theora --width 640 --height 360 -V 1500k -o out.ogg in.mp4


mplayer (which provides mencoder) is available for Linux, Mac, and Windows and can convert files from one format to another.

Please contribute more!


mplayer (which provides mencoder) is available for Linux, Mac, and Windows and can convert files from one format to another.

Please contribute more!

Using flowplayer to play flash video

After downloading and unzipping Flow Player, I put the following three files into a folder called flowplayer:

0 jamie@liberace:html$ ls flowplayer/
flowplayer-3.0.5.min.js  flowplayer-3.0.5.swf  flowplayer.controls-3.0.3.swf
0 jamie@liberace:html$

I put my flv file in a folder called flash:

0 jamie@liberace:html$ ls flash/
0 jamie@liberace:html$

And then I created this html file:

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="flowplayer/flowplayer-3.0.5.min.js"></script>
    <title>City Hall</title>
    <h1>City Hall</h1>
    <a  href="flash/cityhall.1.flv"  id="player"> </a>
      flowplayer("player", "flowplayer/flowplayer-3.0.5.swf");
Last modified 9 years ago Last modified on Feb 21, 2009, 3:18:48 PM