Jul 9, 2023

HTML Video

In this tutorial you will learn how to embed video into an HTML document.

Embedding Video in HTML Document

Inserting video onto a web page was not relatively easy, because web browsers did not have a uniform standard for defining embedded media files like video.

In this chapter we’ll demonstrates some of the many ways of adding videos on web pages, from the latest HTML5 <video> element to the popular YouTube videos.

Using the HTML5 video Element

The newly introduced HTML5 <video> element provides a standard way to embed video in web pages. However, the video element is relatively new, but it works in most of the modern web browsers.

The following example simply inserts a video into the HTML document, using the browser default set of controls, with one source defined by the src attribute.

Example

<video controls="controls" src="media/shuttle.mp4">
  Your browser does not support the HTML5 Video element.
</video>

A video, using the browser default set of controls, with alternative sources.

Example

<video controls="controls">
  <source src="media/shuttle.mp4" type="video/mp4" />
  <source src="media/shuttle.ogv" type="video/ogg" />
  Your browser does not support the HTML5 Video element.
</video>

Using the object Element

The <object> element is used to embed different kinds of media files into an HTML document. Initially, this element was used to insert ActiveX controls, but according to the specification, an object can be any media object such as video, audio, PDF files, Flash animations or even images.

The following code fragment embeds a Flash video into a web page.

Example

<object data="media/blur.swf" width="400px" height="200px"></object>

Only browsers or applications that support Flash will play this video.

Warning: The <object> element is not supported widely and very much depends on the type of the object that’s being embedded. Other methods could be a better choice in many cases. iPad and iPhone device cannot display Flash videos.

Using the embed Element

The <embed> element is used to embed multimedia content into an HTML document.

The following code fragment embeds a Flash video into a web page.

Example

<embed src="media/blur.swf" width="400px" height="200px" />

Warning: However, the <embed> element is very well supported in current web browsers and it is also defined as standard in HTML5, but your video might not played due to lack of browser support for Flash or unavailability of plugins.