Hello dear readers! welcome to this section of my tutorial, in this post am going to be talking about how to embed various multimedia files such as videos and audios into a HTML web page.
Sometimes you need to add music or video into your web page. The best and easiest way to do that is by including the special Html tag called <embed> tag, this Html tag causes the web browser itself to automatically include controls for the multimedia files provided the browser supports <embed> tag and given media type.
You can include the <nonembed> tag for web browsers that do not support the <embed> tag. For example, you could use <embed> to display a movie of your choice, and then <nonembed> to display a single JPG image if the browser does not support <embed> tag.
Example
Here is a brief example on how to play an embed midi file on your web page:
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src="/html/yourfile.mid" width="100%" height="60">
<nonembed><img src="your image.jpg" alt="Alternative media"> </nonembed>
</embed>
</body>
</html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src="/html/yourfile.mid" width="100%" height="60">
<nonembed><img src="your image.jpg" alt="Alternative media"> </nonembed>
</embed>
</body>
</html>
Try the above code out with an actual URL of your media files.
RECOMMENDED: Html-Comments
The <embed> Tag Attributes
Following is the list of the important attributes which can be used with <embed> tag.
| Sr.No | Attribute & Description |
|---|---|
| 1 |
align
Determines how to align the object. It can be set to either center, left or right.
|
| 2 |
autostart
This boolean attribute indicates if the media should start automatically. You can set it either true or false.
|
| 3 |
loop
Specifies if the sound should be played continuously (set loop to true), a certain number of times (a positive value) or not at all (false)
|
| 4 |
playcount
Specifies the number of times to play the sound. This is alternate option for loop if you are usiong IE.
|
| 5 |
hidden
Specifies if the multimedia object should be shown on the page. A false value means no and true values means yes.
|
| 6 |
width
Width of the object in pixels
|
| 7 |
height
Height of the object in pixels
|
| 8 |
name
A name used to reference the object.
|
| 9 |
src
URL of the object to be embedded.
|
| 10 |
volume
Controls volume of the sound. Can be from 0 (off) to 100 (full volume).
|
Supported Video Types
You can use various media types like flash movies (.swf), AVI's (.avi) and MOV's (.mov) file types inside embed tag.
.swf files - These are the file types created by Macromedia's Flash program.
.wmv files - These are microsoft Window's Media Video file types.
.mov files - These are the Apple's Quick Time Movie format.
.mpeg files - These are movie files created by the Moving Picture Expert Group.
RECOMMENDED: Html Image Links
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src="/html/yourfile.swf" width="140%" height="80">
<nonembed><img src="your image.jpg" alt="Alternative media"> </nonembed>
</embed>
</body>
</html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src="/html/yourfile.swf" width="140%" height="80">
<nonembed><img src="your image.jpg" alt="Alternative media"> </nonembed>
</embed>
</body>
</html>
You can also try the above code out for better understanding and feel free to ask your questions.
Background Audio
You can use the Html <bgsound> tag for playing a soundtrack or clip in the background of your webpage. This tag is supported by internet explorer only and most of the other browsers ignore this tag. Its downloads and plays an audio file when the host document is first downloaded by the user and displayed. The background sound file also will replay whenever the user refreshes the browser.
This tag having only two attributes which are loop and src. Both of these attribures have the same meaning as the once i explained above.
Let us take a look at a very brief example on how to play a small midi file.
Example
<!DOCTYPE htmll>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<bgsound src="/html/yourfile.mid">
<nonembed><img src="your image.jpg" alt="Alternative media"></nonembed>
</bgsound>
</body>
</html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<bgsound src="/html/yourfile.mid">
<nonembed><img src="your image.jpg" alt="Alternative media"></nonembed>
</bgsound>
</body>
</html>
HTML Object tag
Html 4 makes available <object> element, which offers to its users an all-purpose solution to a generic object inclusion. It allows authors to specify everything that is required by an object(obj) for its presentation by a user agent.
RECOMMENDED POST: Html Introduction
Below are few examples:
Example 1
You can embed a HTML document in a HTML document it self as follows:
<object data="data/test.html" type="text/html" width="250" height="150" >
alt : <a href="data/test.html">test.html</a>
</object>
alt : <a href="data/test.html">test.html</a>
</object>
In this case the attribute will come into picture if the browser does not support object tag.
Example 2
You can embed a PDF document in a HTML document as follows:
<object data="data/test.pdf" type="application/pdf" width="200" height="100" >
alt : <a href="data/test.pdf">test.html</a>
</object>
alt : <a href="data/test.pdf">test.html</a>
</object>
Example 3
Some parameters that are related to the document can be specified using the <param> tag. Below is a simple example to embed a wav file:
<object data="data/test.wav" type="audio/x-wav" width="200" height="100" >
<param name="src" value="data/test.wav" />
<param name="autoplay" value="false" />
<param name="autostart" value="0" />
alt : <a href="data/test.wav">test.wav</a>
</object>
<param name="src" value="data/test.wav" />
<param name="autoplay" value="false" />
<param name="autostart" value="0" />
alt : <a href="data/test.wav">test.wav</a>
</object>
RECOMMENDED: Html Text Links
Example 4
You can add a flash document as follows:
<object classid="clasid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="penguin"
codebase="someplace/swflash.cab" width="200" height="100" >
<param name="movie" value="flash/penguin.swf" />
<param name="quality" value="high" />
<img src="penguin.jpg" width="200" height="150" alt="penguin" />
</object>
codebase="someplace/swflash.cab" width="200" height="100" >
<param name="movie" value="flash/penguin.swf" />
<param name="quality" value="high" />
<img src="penguin.jpg" width="200" height="150" alt="penguin" />
</object>
Example 5
You can add a java applet into a Html document as follows:
<object classid="clasid:8ad9c840-044e-11d1-b3e9-00805f499d93" width="200" height="100" >
<param name="code" value="applet.class" />
</object>
<param name="code" value="applet.class" />
</object>
Well that is it on this tutorial, see you on my next tutorial and don't forget to subscribe to our email list, bye for now.