What you need to know about video

There are a large number of different container formats that are used to store video. These formats differ both in terms of the level of compression they support and the playback mechanism they work with.

Video via the flash plug-in

Before HTML 5, browsers did not offer a direct method to display video. Instead, all browsers offered a plug-in mechanism that would enable third party developers to extend the capabilities of the browser. This lead to the development of plug-ins such as the QuickTime plug-in and the Flash plug-in to enable multi-media playback, including video playback.

Here is a sample page on the author's web site that demonstrates flash video playback.

Embedding via an iframe element.

Another alternative for displaying video is to use a hosting service, such as YouTube or Vimeo. These services will allow you to upload video content and then share that content out from their servers. These services will also typically provide you with HTML embedding code that you can paste into your site. The method that this embedding code most commonly uses is the iframe element. An iframe is like a hole in your HTML page through which you can display content from another site. In this case of video, the hosting service provides a page that contains all of the necessary elements to make the video playback work. All you need to do is to provide an iframe that allows the hosting service's page to poke through into your side.

Here is an example of a YouTube video in an iframe. Once again, you can do a view source on this page to see how this is set up.

HTML 5 element

HTML 5 offers a new <video> element that makes it easier to embed video in a page without using a hosting service. That element is discussed in chapter 9. Here is a link to a page that demonstrates this new element.