Video

There are a lots of different types of file formats available for the display of video on the web. In this page I discuss a few of the more common formats.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Flash/Shockwave

Flash is a technology developed by Adobe as a method for developing interactive games as well as encoding and displaying video on the net. Flash lets you build a frame-based animations including interactive ActionScript elements, which are usually encoded as .swf (Shockwave Flash) files. An example of this is show on the right. It also lets you deploy full motion video for the web, usually encoded as .flv (Flash Video) files.

You can find more details on both of these forms of Flash file on the follow two Wikipedia pages:

Most browsers support Flash via a plug-in. This is a very popular technology, but since Apple decided that they were not going to support it on iOS devices, its future has become less certain. In particular, Adobe themselves seem to be positioning their AIR (Adobe Interactive Runtime) technology as a system for building interactive web content.

The tool for building Flash media elements is part of the Adobe creative suite. However, the plug-in for playing Flash content is freely downloadable.

QuickTime

QuickTime is an Apple multimedia technology which is used extensively for encoding video on the web. It can handle a variety of different video formats and also includes interactive features. QuickTime files are usually usually encoded as .mov files.

Although this is Apple technology, there are downloads available for the windows platform, and most browsers support the format through a plug-in.

Windows Movie

Microsoft have developed two different video formats for the web.

The Windows Movie format is usually encoded as a .wmv (Windows Media Video) file, whilst the Audio Video Interlaced format is encoded as an .avi file. The WMV file format gives very small files which are suitable for downloading or streaming over the internet. In contrast the AVI format tends to give very large files, which are used mainly for editing, rather than downloading.

Embedding YouTube Video

It is also possible to embed a video being hosted by someone else in your own web page. For example, the vide below is being hosted by YouTube, but code in this page shows the video here.

This technique is very useful if you do not have enough storage and bandwidth on your own web server to store and deliver your video files. Instead, you can upload them to YouTube, but still show them in your own page.

Links

Web Net Hosting have a brief overview of each of the common formats, including the differences between codecs and containers.

http://www.webnethosting.net/the-different-types-of-video-file-formats-on-the-internet/

The Reelseo site also have a comprehensive guide to the different video formats in use on the web.

http://www.reelseo.com/basics-web-video-file-formats-video-containers/

Other Moving Image Formats

There are a number of other techniques for including moving images in a web page. Whilst not offering the full motion capabilities of true video formats, these techniques are sometimes more appropriate, depending on the actual task.

GIF Slide ShowAnimated GIF

For simple animated sequences you can use an animated GIF. Because of the image quality, this format probably has limited use. For example, the slide show shown as a Flash example above is repeated here (on the right) as a GIF animation. Notice the significant decrease in image quality.

You can find more details of the GIF format here.

JavaScript Slide Show

If all you require is a slide show, then you can simply use a JavaScript utility in the page to animate a sequence of still images. There are details on how to do this here. This technique has the advantage of flexibility. It is easy to change the images without having to completely rebuild the animation.

Summary

It is interesting to compare the different formats. For the slide show example, the basic Flash file is only 1.12MB, but the same slide show rendered as an animated GIF is 1.61MB.