HTML Video


There are many ways to play videos in HTML.


HTML Videos 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>

Try It! 


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, the tutorial summarizes the problems and solutions for you.


Use the <embed> Tag

The function of the <embed> tag is to embed multimedia elements in HTML pages.

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

Example

<embed src="intro.swf" height="200" width="200">

 Try It! 

problem

  • HTML4 does not recognize the <embed> tag. Your page could not be verified.

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

  • iPad and iPhone cannot display Flash video.

  • If you convert the video to other formats, it still cannot be played in all browsers.


Use the <object> Tag

The function of the <object> tag is to embed multimedia elements in HTML pages.

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

Example

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

Try It! 

problem:

  • If the browser does not support Flash, the video cannot be played.

  • iPad and iPhone cannot display Flash video.

  • If you convert the video to other formats, it still cannot be played in all browsers.


Use HTML5 <video> Element

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

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

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

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">
   Your browser does not support the video tag.
</video>

Try It! 

problem:

  • You must convert the video to many different formats.

  • The <video> element has no effect in older browsers.


The Best HTML Solution

4 different video formats are used in the following examples. The HTML 5 <video> element will try to play the video in one of mp4, ogg, or webm format. If both fail, fall back to the <embed> element.

HTML5 + <object> + <embed>

<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>

Try It! 

problem:

  • You have to convert the video to many different formats


Use Hyperlink

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

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

Example

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

Try It! 


Notes About Inline Videos

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

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

Please also note that the user may have turned off the inline video option in the browser.

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


HTML Multimedia Tags

New : HTML5 new tags.

TagDescription
<embed>Define embedded objects. Deprecated in HTML4, but allowed in HTML5.
<object>Define embedded objects.
<param>Define the parameters of the object.
<audio>NewDefined sound content
<video>NewDefine a video or movie
<source>NewThe multimedia resources (<video> and <audio>) that define the media element
<track>NewSubtitle files or other files containing text (<video> and <audio>) that specify the media element