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="/html/media/video/sampleTP.mp4"type="video/mp4" width="450" height="250"></embed></body></html></pre>Embedding an Audio Using <embed> Element
To add a soundtrack to the webpage, we can pass the path of the audio file into the
srcattribute by mentioning thetypeof 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></pre>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></pre>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></pre>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.