HTML Video (Video)

There are many ways to play video in HTML.

HTML Video (Videos) playback

Problems and Solutions

Playing video in HTML is not easy!

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

In this chapter, Example Tutorial summarizes the problems and solutions for you.

Using <embed> tag

The <embed> tag's purpose is to embed multimedia elements in an HTML page.

The following HTML code displays an embedded Flash video on a webpage:

Problem

• HTML4 cannot 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 other formats, it will still not play in all browsers.

Using <object> tag

The <object> tag's purpose is to embed multimedia elements in an HTML page.

The following HTML fragment displays a Flash video embedded on a webpage:

Problem:

• 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 other formats, it will still not play in all browsers.

Using HTML5 <video> element

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

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

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

Problem:

• You must convert the video to many different formats.
• The <video> element is invalid in old browsers.

The Best HTML Solution

In the following instance, four different video formats are used. The HTML5 <video> element will attempt to play the video in the mp4, ogg, or webm format. If all fail, it will fallback to the <embed> element.

You must convert the video to many different formats

• Using Hyperlinks

Using Hyperlinks

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

Instance

Explanation of 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.

At the same time, please note that users may have already disabled the inline video option in their browser.

Our best advice is to only include inline video where users want to see it. A positive example is to include a video that opens a new page and plays when the user clicks on a link.

Our best advice is to include them only where users want to see inline videos. A positive example is where a video is displayed to users and then a link is clicked, opening a page and playing the video.

HTML Multimedia Tags

New: HTML5 new tags.