in

Learn How To Embed HTML Multimedia In Web Documents

Hello in this tutorial you will be learning how to embed HTML multimedia in a web document. In our previous tutorial we learnt about HTML Forms, the attributes and tags needed to have the forms fully set up on our web page.

Read the previous tutorial on: Tutorial #21 Learn About HTML Forms and How To Design Them

What is HTML Multimedia?

HTML multimedia are multimedia files added to the HTML documents. These includes videos, songs etc.

Sometimes developers need to add multimedia to their web document. They can do this using the HTML Multimedia embed tag <embed>. This allows the developer the opportunity to get multimedia’s embedded in their web documents. Some browsers do not support multimedia files so we can use the <noembed> HTML tag to show up an image if the browser doesn’t support multimedia files. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>illustration of embed and noembed html tag</title>
   </head>
	
   <body>
      <embed src = "yourvideofile-link.mp4" width = "19%" height = "4" >
         <noembed><img src = "the-image.jpeg" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

The embed tag attributes

This is the list of attributes that can be used in the embed tag

Attribute Description
Align Used to align the media object to the left, right or center
height Height of the object to be viewed
width width of the object to be viewed
src The source link of the media file
volume Use to determine the volume of the file sound
name This is the name used to reference the object
loop Can be used to loop the media file
autostart Can be used to auto start the media
playcount Can be used to specify the amount of time to play the sound
hidden This can be used to specify if the media file should be hidden or not

Supported video file types

Here is the list of file types that can be used to add videos to a web document

  1. swf video files – This file type is from macro media flash program
  2. .wmv files – This is a microsoft windows media video file type
  3. .mov files- These file extention is for quick time movie format
  4. .mpeg files- These are files from movie pictures expert group
  5. .mp4 files – same as mpeg-4

Examples

<!DOCTYPE html>
<html>

   <head>
      <title>illustration of embed and noembed html tag</title>
   </head>
	
   <body>
      <embed src = "yourvideofile-link.mp4" width = "19%" height = "4" >
         <noembed><img src = "the-image.jpeg" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

HTML Object Tags for Embedding HTML AND PDF documents

HTML allows developers to have an <object> tag which serve the purpose of collective object inclusion. This is used to specify all that is required for the document presentation by a user agent or web browser.

Embedding HTML document in HTMl document

you can embed a HTML document in another HTML document using the below sample code structure

 <object data = "officedata/sample.html" type = "officedata/html" width = "150" height = "900">
         alt : <a href = "officedata/sample.html">officedata.html</a>
      </object>

Embedding PDF in HTML document

you can embed a PDF document in another HTML document using the below sample code structure

<object data = "officedata/sample.pdf" type = "application/pdf" width = "150" height = "900"> 
        alt : <a href = "officedata/sample.pdf">officedata.pdf</a>    
</object>

Conclusion

Now you understand the basics of Embedding HTML web Documents and you are really doing great. Lets move on to the next tutorial on HTML MARQUEE

What do you think?

html forms

Learn About HTML Forms and How To Design Them

html marquee

Simple Tutorial On How To Use HTML Marquee The Easy Way