Embedding Multimedia in HTML is nothing but adding of Pictures, Audio, Video, and other plugins to the website by using special HTML tags, web browser started with supporting text and colors only In HTML but now with the HTML 5, Multimedia has interactive content. Let us understand HTML Embed Multimedia in detail.

How to Embed Multimedia in HTML?

Multimedia elements are Embedded in HTML documents by various methods which are also used to add media files to the HTML webpage supported by different types and formats.

Multimedia elements are stored in media files of the HTML document.
Media files have formats and different file extensions for eg: mp4, WebM, wav, .mp3, .mpg, .wmv, and .avi, .ogg, .swf
Video in HTML document can be added with <video> element by using control Attributes to display the content on the webpage.
Audio in HTML document can be added with <audio> element by using control Attributes to display the content on the webpage.

There are three major ways to add multimedia to the webpage in the HTML document.

1. HTML <embed> Tag

The <embed> tag in HTML is used to add external application multimedia files that are mainly sound and video and other plugins on the webpage.

<embed> tag is supported by most of the web browsers and it is new in HTML 5.
<embed> tag has only an open tag and does not assure to have a closing tag.
<noembed> tag is used when any web browser does not recognize the HTML <embed> tag.

Syntax

<embed src=”URL”>

source Attribute is used to embed multimedia in HTML document with <embed> tag and there are media type supported inside the <embed> elements for eg: .swf files , .wmv files , mpeg files, .mov files , .avi files etc.

Attributes of <embed> tag

Common attributes used in <embed> element to add multimedia in HTML.

height: This attribute defines the height of the multimedia object in pixels.
src: This attribute defines the URL of the web browser as the multimedia object embedded.
width: This attribute defines the width of the multimedia object in pixels.
type: This attribute is used to define the media type of the plug-in embedded.

Example of <embed> tag using width and height Attributes.

 <html>  
<head>  
<title>Embeding multimedia in HTML</title>  

</head>  
<body>  
<h2>Example of embed tag</h2>  
<p>The Homepage of codedec</p>  
<embed src="/home/aman/Desktop/frames/sd.png" height="200" width="300"></embed>  
</body>  
</html>

OUTPUT:

Example of <embed> Element with <noembed> tag.

<!DOCTYPE html>
<html>
<body>

<embed src="https://youtube.com/embed/vof2vtrGRRE" width="500" height="300" >
   <noembed><img src="/home/aman/Desktop/frames/codebunlogo.png" alt="Your Alternative Media" ></noembed>
</embed>

</body>
</html>

OUTPUT:

2. HTML <bgsound> Tag

The <bgsound> tag in HTML document is used to add background audio media and on the webpage.

<bgsound> tag is mainly used in internet explorer and ignored by most of the browsers. it is deprecated from latest version of HTML.
<bgsound> tag audio repeatedly play in the background whenever the viewer refresh the HTML document.
<audio> tag is used in latest version of HTML instead of <bgsound> tag.
<bgsound> does not display any content only the backround audio in HTML document.

Syntax

<bgsound src=”URL”>

source Attribute is used to embed audio file in HTML document with <bgsound> tag and there are media type supported inside the <bgsound> elements for eg: .wmv, .mov, .mpeg, etc.

Attributes of <bgsound> tag

There are major two Attributes used in <bgsound> element to add background audio.

loop – This attribute defines the number of time background audio will be played on the loop with determined condition
src – This attribute defines the URL of the path of the soundtrack embedded.

Example of <bgsound> which is only supported on internet explorer.

<!DOCTYPE html>
<html>
 <head>
      <title>Example of HTML embed Tag</title>
   </head>
  
<body>
<bgsound src="audio file">
   <noembed><img src="image file" ></noembed>
</bgsound>
<p>bgsound is not supported in HTML5.</p> 
    
</body>
</html>

3. HTML <object> Tag

The <object> tag in HTML is used to add external object multimedia files that are mainly audio, images, pdf, flash, video, and other webpages on the current webpage.

<object> tag supported by most of the web browsers and it was introduced in HTML 4.
<object> element is defined in the <body> tag of the HTML document .
The <param> tag is used as parameters to plugins that have been embedded along with the <object> tag.
HTML document object can be defined under the <object> tag of the current HTML document.

Syntax

<object type =””></object> or <object data=””></object>

Type attribute is used with object tag or the data attribute is used with the object tag in the HTML document to display the content on the webpage.

Attributes of <object> tag

Common attributes used in <object> element to add multimedia in HTML.

height: This attribute defines the height of the multimedia object in pixels.
Form: This attribute defines the form id of the object element.
width: This attribute defines the width of the multimedia object in pixels.
type: This attribute is used to define the media type of the plug-in embedded.

Example of <object> tag embedding image in HTML document .

<!DOCTYPE html> 
<html> 

<head> 
  <title> Example of Object Tag</title> 
</head> 

<body> 
   
<h1>Object Tag in HTML</h1> 
<br> 

  <object data= 
"/home/aman/Desktop/frames/codebunlogo.png"
      width="550px" height="150px">video lecture for programming availabel on youtube</object> 

</body> 

</html>

OUTPUT:

Example of <object> tag embedding HTML document in current HTML document.

<!DOCTYPE html>
<html>
<body>

<object width="100%" height="500px" data="/home/aman/Desktop/frames/loginform.html"></object>
 
</body>
</html>

OUTPUT: