HTML Video

There are many ways to play videos in HTML.

HTML Video Playback

Example

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object> 
</video>

Problems and Solutions

Playing videos in HTML is not easy!

You need to be familiar with a lot of techniques to ensure that your video files can be played in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac, iPad, iPhone).

In this chapter, tutorialpro.org summarizes the problems and solutions for you.

Using the <embed> Tag

The <embed> tag is used to embed multimedia elements in an HTML page.

The following HTML code displays a Flash video embedded in a web page:

Example

Problems:

• HTML4 does not recognize the <embed> tag. Your page cannot be validated.

• If the browser does not support Flash, the video will not play.

• iPad and iPhone cannot display Flash videos.

• If you convert the video to another format, it still may not play in all browsers.

Using the <object> Tag

The <object> tag is used to embed multimedia elements in an HTML page.

The following HTML snippet displays a Flash video embedded in a web page:

Example

Problems:

• If the browser does not support Flash, the video will not play.

• iPad and iPhone cannot display Flash videos.

• If you convert the video to another format, it still may not play in all browsers.

Using the HTML5 <video> Element

The HTML5 <video> tag defines a video or a movie.

The <video> element is supported in all modern browsers.

The following HTML snippet displays a video embedded in a web page in ogg, mp4, or webm format:

Example

Problems:

• You must convert the video to many different formats.

• The <video> element is not valid in older browsers.

Best HTML Solution

The following example uses four different video formats. The HTML5 <video> element will try to play the video in mp4, ogg, or webm format. If all fail, it falls back to the <embed> element.

HTML5 + <object> + <embed>

Problems:

• You must convert the video to many different formats.

Using Hyperlinks

If a web page contains hyperlinks to media files, most browsers will use a "helper application" to play the files.

The following code snippet shows a link to an AVI file. If a user clicks the link, the browser will launch a "helper application," such as Windows Media Player, to play the AVI file:

Example

<a href="intro.swf">Play a video file</a>

Notes on Inline Video

When a video is included in a web page, it is called inline video.

If you plan to use inline video in a web application, you need to be aware that many people find inline video annoying.

Also note that users may have turned off inline video options in their browsers.

Our best advice is to include inline videos only where users expect to see them. A positive example is when a user needs to see a video and clicks a link, which opens a page and plays the video.

HTML Multimedia Tags