HTML - Embed Multimedia

In the previous two chapters, we have used the <audio> and <video> elements to add music and videos into our web page. There are other alternative ways to add videos, sounds and images or any other external content to the web site by using HTML tags <embed> and <object>. These tag causes the browser itself to include controls for the multimedia automatically.

HTML <embed> tag is used to embed external contents such as images, videos and and web applications. It is often used for embedding content like Flash movies or audio/video players.
HTML <object> tag is used to embed various types of external resources, including images, videos, PDFs, and other web resources. It can render multiple types of files.

Syntax

Embed tag:

<embed src = "url/of/resource">

Object tag:

<object data="url/of/resource" type="typeOfResource">

Attributes of <embed> Tag

Attribute	Description
width	Width attribute is used describe width of the embedded file in pixels.
height	Height of the embedded file in pixels.
title	It is used to label the content. The title should describe the content.
src	URL of the file to be embedded.
type	It indicates the type of input like mp4 and mp3.

Attributes of Object Tag

Attributes	Description
data	The location or path of the resource is passed into data attribute.
type	It indicates the type of resource.
height	It signifies the height of the resource display area.
width	It signifies the width of the resource display area.
form	Its value is the id of a form. The form attribute shows which object is associated with the form.
name	It specify a unique name for the object.
usemap	Specifies a URL of a client-side image map to be used with the object.

Examples of HTML multimedia embedding

Here are few examples that illustrate how to render multimedia content in a webpage using embed and onject tag.

Embedding a Video using Embed Element

To embed an external video file inside the web page, we can pass the path of video file into the src attribute of <embed> element. The supported video formats are MP4, WebM, and Ogg. We don’t need to use the controls attribute as <embed> tag provides the controls automatically depending on the type of media. The controls attribute allows users to manage the video playback functions.

The following example demonstrates how to embed a video file using the embed element.

<!DOCTYPE html>
<html>

<head>
   <title>HTML embed Tag</title>
</head>

<body>
   <h1>Playing video using embed tag</h1>
   <embed src="/html/media/video/sampleTP.mp4" 
          type="video/mp4" 
          width="450" 
          height="250">
   </embed>
</body>

</html>

Embedding an Audio using embed Element

To add a soundtrack into the webpage, we can pass the path of audio file into the src attribute by mentioning the type of audio. The supported audio formats are ogg, mp3 and wav.

The following example demonstrates how to embed a audio file using the embed element.

<!DOCTYPE html>
<html>

<head>
   <title>HTML embed Tag</title>
</head>

<body>
   <h1>Playing audio using embed tag</h1>
   <embed src = "/html/media/audio/sample_3sec_audio.mp3" 
          type = "audio/mp3" 
          width="450" 
          height="250">
   </embed>
</body>

</html>

Render a pdf using Object element

HTML 4 introduces the <object> element, which offers an all-purpose solution to generic object inclusion. The <object> element allows HTML authors to specify everything required by an object for its presentation by a user agent.

We can embed a PDF document in an HTML document as follows:

<!DOCTYPE html>
<html lang="en">

<head>
      <title>PDF Embed Example</title>
</head>

<body>
      <h1>Embedding a PDF Document</h1>
      <p>Here is an embedded PDF document:</p>
      <object data="html/pdf/index.pdf" 
              type="application/pdf" 
              width="300" 
              height="200">
      </object>
</body>

</html>

Render a HTML document inside webpage

We can embed an HTML document in an HTML document itself as follows.

<!DOCTYPE html>
<html lang="en">

<head>
      <title>HTML Embed Example</title>
</head>

<body>
   <h1>Embedding an HTML Document</h1>
   <p>Here is an embedded HTML document:</p>
   <object data="html/index.htm" 
            type="text/html" 
            width="500" 
            height="400">
      alt : <a href="html/index.htm">
         test.htm
      </a>
   </object>
</body>

</html>

Comparison between Object tag and Embed tag

Comparison between two similar tags will help to choose the right tag on the right place.

Feature	<object>	<embed>
HTML Tag	<object>	<embed>
Usage	Embeds multimedia like audio, video, Java applets, ActiveX, PDF, Flash	Primarily used to embed multimedia content
Attributes	Supports various attributes like data, type, width, height	Supports various attributes like src, type, width, height
HTML5	Supported	Supported
Fallback Content	Can include fallback content within the tag	Cannot include fallback content within the tag

Object tag supports fallback content, which means if a version of browser does not support object tag then the content written inside object tag is displayed instead of object tag.

Print Page