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 is another alternative way to add videos, sounds and images or any other external content to the web site by using a special HTML tag called <embed>. This tag causes the browser itself to include controls for the multimedia automatically.

Example

Here is a simple example that displays an embedded image file −

<!DOCTYPE html>
<html>
<head>
   <title>HTML embed Tag</title>
</head>
<body>
   <h1>Tutorials Point Logo</h1>
   <embed src = "/images/logo.png">
   </embed>
</body>
</html>

You can put any media file in src attribute. You can try it yourself by giving various types of files.

The <embed> Tag Attributes

Following is the list of important attributes which can be used with the <embed> tag.

S.No. Attribute & Description
1

width

Width of the object in pixels.
2

height

Height of the object in pixels.
3

title

It is used to label the content. The title should describe the content.
4

src

URL of the object to be embedded.
5

type

It indicates the type of input like mp4 and mp3.

Embedding a Video using <embed> Tag

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.

Example

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>

When we execute the above HTML code, it will generate a video player on the webpage.

Embedding an Audio using <embed> Tag

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.

Example

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>

On running the above HTML code, it will produce an audio player on the webpage.

HTML Object tag

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.

Object tag Attributes

Following is the list of object tag attributes −

S.No. Attributes & Description
1

data

The location or path of the resource is passed into data attribute.
2

type

It indicates the type of resource.
3

height

It signifies the height of the resource display area.
4

width

It signifies the width of the resource display area.
5

form

Its value is the id of a form. The form attribute shows which object is associated with the form.
6

name

It specify a unique name for the object.
7

usemap

Specifies a URL of a client-side image map to be used with the object.

Following are a few examples −

Example

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

<object data="data/test.htm" type="text/html" width="300" height="200">
   alt : <a href="data/test.htm">test.htm</a>
</object>

Here alt attribute will come into picture if browser does not support object tag.

Example

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

<object data="data/test.pdf" type="application/pdf" width="300" height="200">
   alt : <a href="data/test.pdf">test.htm</a>
</object>
Advertisements