HTML - Embed Multimedia
There are times when you may have to play music or render a video on your website. One of the simplest ways to feature video or sound to your internet site is to incorporate the special HTML tag called <embed>. This tag causes the browser itself to incorporate controls for the multimedia automatically provided browser supports <embed> tag and given media type.
You can also include a tag for the browsers which don't recognize the <embed> tag. You could, for instance, use <embed> to display a movie of your choice and to display one JPG image if the browser doesn't support the <embed> tag.
Example
Below is a simple example to show how to embed an embedded midi file:
<!DOCTYPE html> <html> <head> <title>HTML embed Tag</title> </head> <body> <embed src = "/html/yourfile.mid" width = "100%" height = "60" > <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed> </embed> </body> </html>
The <embed> Tag Attributes
The following is the available list of important attributes that can be used with the <embed> tag.
Note: The align and autostart attributes deprecated in HTML5. Do not use these attributes.
| 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 an alternate option for the loop if you are using IE. |
| 5 |
hidden: Specifies if the multimedia object should be shown on the page. A false value means no and true values mean 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. It 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 the embed tag.
1. .swf files: are the file types created by Macromedia's Flash program.
2. .wmv files: are Microsoft's Window's Media Video file types.
3. .mov files: are Apple's Quick Time Movie format.
4. .mpeg files: are movie files created by the Moving Pictures Expert Group.
<!DOCTYPE html> <html> <head> <title>HTML embed Tag</title> </head> <body> <embed src = "/html/yourfile.swf" width = "200" height = "200" > <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed> </embed> </body> </html>
The above code will be displayed as:
Background Audio
You can use HTML <bgsound> tag to play a soundtrack within the background of your webpage. This tag is supported by Internet Explorer only and most of the opposite browsers ignore this tag.
Note: The bgsound tag is deprecated and it's alleged to be removed during a future version of HTML. in order that they shouldn't be used rather, it's suggested to use HTML5 tag audio for adding sound. But still, for learning purposes, this chapter will explain <bgsound> tag intimately.
This tag has only two attributes loop and src. Both these attributes have an equivalent meaning as explained above.
Here is a simple example showing how to play a little midi file:
<!DOCTYPE html> <html> <head> <title>HTML embed Tag</title> </head> <body> <bgsound src = "/html/yourfile.mid"> <noembed><img src = "yourimage.gif" ></noembed> </bgsound> </body> </html>
This will produce a blank screen. This tag doesn't display any component and remains hidden.
Internet Explorer can mainly handle barely three different formats of sound files just like the wav, the native format for PCs; au, the native format for several Unix workstations; and MIDI, a universal music-encoding scheme.
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
