HTML5 Multimedia

Integration of Multimedia into HTML5 documents

1. Video

HTML5 Video

When is it used?

The HTML5 Video element is used when you want to deploy video on a website. Video can be a "traditional" short movie, an animation, slideshow, or other movie-type clip.

Supported Formats

There are numerous video formats that are available. Only 3 of them are supported with the HTML5 Video element:

The supported formats are:

  • MP4
  • WebM

To complicate matters, not all of the browsers support all of the formats:

Internet Explorer Yes No No
Google Chrome Yes Yes Yes
Mozilla Firefox No Yes Yes
Apple Safari Yes No No
Opera No Yes Yes

As you can see, no one format is supported by all of the browsers. However, if we expand to two formats (e.g. MP4 and OGG/OGV or MP4 and WebM, we can support all browsers.

In fact, this is what we must do to utilize the HTML5 Video element. You will need to have the video in at least two formats to ensure compatibility with the maximum number of browsers.

The Code

For this coding example, let's assume that we have a video that measures 550px wide and 400px tall that is named running. We have it in two formats (MP4 and WebM). As such, the file names are running.mp4 and running.webm.

<video width="550" height="400" controls>
  <source src="running.mp4" type="video/mp4">
  <source src="running.webm" type="video/webm">

Let's Pull That Code Apart

In the code, the first line opens the video element and utilized the attributes of width, height, and controls. Width and height are relatively self-explanatory as they control the size of the video for playback. The controls attribute sets the playback controls to be visible. If this attribute is omitted, the video will have no playback controls.

Additional attributes that can be utilized in the opening tag are:

  • autoplay - automatically starts the video when loaded
    • ideal for video slideshows with no playback controls
  • loop - automatically loops the video once it reaches the end of playback
    • ideal for video slideshows with no playback controls
  • mute - mutes the audio track of the video

The next two lines of the code are the source "sub-elements". I call them sub-elements because they are wrapped inside the video element.

The src attribute is self-explanatory and points to the location of the respective video files. The type attribute is little bit more tricky. The values used for the type attribute should be selected from the following table:

File Format Type Value
MP4 video/mp4
WebM video/webm
OGG video/ogg

The code closes with a closing video tag.

Let's Make It Work

We will need to acquire some sample video to work with. Download each of the following clips to your local hard drive:

Let's use the code above to create a player for this video that will play in all browsers.

More Information

More information can be located about the HTML5 Video element at W3Schools Article - HTML Video Tag.