HTML Video

There are many ways to play video in HTML.

Example

<video width="320" height="240" controls="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>

Try it yourself

Problems, problems, and solutions

Playing video in HTML is not easy!

You need to be proficient in a large number of skills to ensure that your video files can be played in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and all hardware (PC, Mac, iPad, iPhone).

In this chapter, CodeW3C.com summarizes the problems and solutions for you.

Use the <embed> tag

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

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

Example

<embed src="movie.swf" height="200" width="200"/>

Try it yourself

Problem

  • HTML4 cannot recognize the <embed> tag. Your page cannot pass validation.
  • If the browser does not support Flash, the video cannot be played
  • iPad and iPhone cannot display Flash videos.
  • If you convert the video to another format, it still cannot be played in all browsers.

Use the <object> tag

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

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

Example

<object data="movie.swf" height="200" width="200"/>

Try it yourself

Problem

  • If the browser does not support Flash, the video cannot be played.
  • iPad and iPhone cannot display Flash videos.
  • If you convert the video to another format, it still cannot be played in all browsers.

Use the <video> tag

The <video> tag is a new tag in HTML 5.

The <video> tag is used to embed video elements in HTML pages.

The following HTML snippet will display a video embedded in the webpage in ogg, mp4, or webm format:

Example

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

Try it yourself

Problem

  • You must convert the video into many different formats.
  • The <video> element is invalid in old browsers.
  • The <video> element cannot pass HTML 4 and XHTML validation.

Best HTML Solution

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="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>

Try it yourself

In the example above, 4 different video formats were used. The HTML5 <video> element will try to play the video in one of the following formats: mp4, ogg, or webm. If all fail, it will fallback to the <embed> element.

Problem

  • You must convert the video into many different formats
  • The <video> element cannot pass HTML 4 and XHTML validation.
  • The <embed> element cannot pass HTML 4 and XHTML validation.

Note:Use <!DOCTYPE html> (HTML5) to solve validation issues.

Youku Solution

The simplest way to display a video in HTML is to use video websites like Youku.

If you want to play a video on a webpage, you can upload the video to video websites like Youku and then insert the HTML code into your webpage to play the video:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

Try it yourself

Using Hyperlinks

If a web page contains hyperlinks to media files, most browsers will use 'assistant applications' to play the files.

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

Example

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

Try it yourself

A note about inline video

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

If you plan to use inline videos in web applications, you need to be aware that many people find inline videos annoying.

At the same time, please note that the user may have already turned off the inline video option in the browser.

Our best advice is to only include them where the user wants to see inline videos. A positive example is, when the user needs to see a video and click on a link, the page will open and the video will play.

HTML 4.01 Multimedia Tags

Tag Description
<applet> Not Recommended.Define an embedded applet.
<embed> Not Recommended.Define an embedded object. (Allowed in HTML5)
<object> Define an embedded object.
<param> Define the parameters of an object.

HTML 5 Multimedia Tags

Tag Description
<video> The tag defines sound, such as music or other audio streams.
<embed> The tag defines embedded content, such as plugins.