HTML - Embed Multimedia

Quiz

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, images, or any other external content to the website by using HTML tags <embed>and<object>. These tags cause the browser itself to include controls for the multimedia automatically:

HTML <embed> tag is used to embed external content such as images, videos, 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

Here is the syntax of embedding multimedia in the webpage:

Embed tag:

<embed src = "url_of_resource">

Object tag:

<object data="url_of_resource" type="typeOfResource">

Attributes of <embed> Tag

The following are the attributes used with the <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

The following are the attributes used with the <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 a few examples that illustrate how to render multimedia content in a webpage using the <embed> and <object> tags:

Embedding a Video Using <embed> Element
Embedding an Audio Using <embed> Element
Render a PDF Using <object> Element
Render an HTML Document Inside Webpage

Embedding a Video Using <embed> Element

To embed an external video file inside the web page, we can pass the path of the video file into the src attribute of the <embed> element. The supported video formats are MP4, WebM, and Ogg. We dont need to use the controls attribute, as the <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="/https/www.tutorialspoint.com/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 to the webpage, we can pass the path of the 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 an 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 an 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> and <embed> Tags

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, and Flash.	Primarily used to embed multimedia content
Attributes	Supports various attributes like data, type, width, and height.	Supports various attributes like src, type, width, and height.
HTML5	Supported	Supported
Fallback Content	Can include fallback content within the tag	Cannot include fallback content within the tag

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

Print Page