Embedding Audio/Sound/Video in background in HTML



EMBEDDING AUDIO:

It will be nice to hear a background music while working with html files. And now its simple to include an audio file into HTML page. There are different syntax for different browsers. For example, internet explorer support the BGSOUND and netstcape support an embed tag for embedding musics.
Free music downloads are available at various sites. Those websites will give us a trail to download and hear the music. We can just use those files in our html pages. In such cases, the embed tag is used much.

In Internet Explorer the audio can be included using <BGSOUND> tag. bgsound tag works only in IE and not in any other browsers.

Example Code:

<bgsound src="he-knows.wav" LOOP="-1" > 

The audio can be included using <embed> tag for netscape like browsers.

Example Code:

<EMBED SRC="he-knows.mp3" HIDDEN="true" AUTOSTART="true" LOOP="infinite" Height=145 width=160></EMBED> 

This will include backgound music into your webpage. If you want to display the controls in the browser, you can set the hidden attribute to false. Here in the above example we have used Loop=-1 which will play the file again and again. If you want to play it only once just set the loop to false.


IMPORTANT ATTRIBUTES OF EMBED:

  • SRC: This attribute takes the audio to the source URL.

  • WIDTH and HEIGHT: It manages the size of the plug-ins in html page.

  • AUTOSTART: Its value can be either TRUE or false
    TRUE: It will play the sound when the page loads.
    FALSE: It will wait for the user to click on the play button.

  • LOOP: The default value is FALSE which plays the file only once. Setting this to TRUE will play the sound continuously.


EMBEDDING BACKGROUND SOUND USING META:

Example Code:

<meta http-equiv="REFRESH" content="0;URL='ourmusic.wav'" > 

When you use the META tag element, the browser displays an dialog box which asks for what should firefox do with this file?. You can choose the player of your wish to play the song. For example, if you are opening with Windows Media Player then, the browser will take you to the windows Media player to play the song.


Using the Object Tag:

Apart from the non standard Embed tag, we can also use the <object> tag for embedding medias into our web pages. But, it is not still effective for cross-browser functions.You can specify some parameters related to the document with the param tag. IE sometimes needs a src parameter to understand the location

Example Code:
<object data="music.wav" type="audio/x-mplayer2" width="320" height="240">
<param name="src" value="music.wav">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
Hear the sound : <a href="music.wav">music</a>
</object>
Type attribute specifies the application/media player type you are using.

Use the following type for your media player,
Windows Media Player : type="application/x-mplayer2".
Quicktime: type="video/quicktime".
RealPlayer: type="audio/x-pn-realaudio-plugin".


Result:

Hear the sound : music 

The parameters autoplay is understandable by QuickTime, autoStart by Windows media Player and Real Audio.


HTML embedding video in IE:

Adding a media player to HTML page is simple using the embed tag. Mostly the embed element is used for embedding video files into the html pages. We can also use the DYNSRC attribute of the image element for adding media file. It works only in the Internet explorer. 

Example Code:

<IMG DYNSRC="ourmovie.mov" LOOP="true" WIDTH="200" HEIGHT="100"> 

HTML embedding using the embed element:

Just use <EMBED> tag to add video

Example Code:

<EMBED SRC="mymovie.mov" WIDTH="200" HEIGHT="100" AUTOPLAY="TRUE" LOOP="true"></EMBED> 

This will include a media file into your webpage.

Result:

click here to view the result of above code 

Attributes of Embed Tag:

  • SRC: This attribute takes the video/movie to the source URL.

  • WIDTH and HEIGHT: It specifies the dimensions of the plug-ins.

  • AUTOPLAY: Its value can be either TRUE or false
    TRUE: Movie plays when page loads
    FALSE: Waits for the user to click the play button in window media player.

  • LOOP: Setting this to TRUE will play the media file continuously. A FALSE value will play the media only once.

  • CONTROLLER: Display controls. Can be set to TRUE or FALSE.

Adding video using Object Tag:

Video files can also be inserted into the webpage or html pages using the standard object tag. Object element works in both IE and netscape browsers. For some types, like QuickTime document, adding the classid attribute will load the controls.

Example Code:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="240">
<param name="src" value="data/intro.wmv" >
<param name="controller" value="true" >
<param name="autoplay" value="false">
<object type="video/quicktime" data="data/intro.wmv" width="320" height="240">
<param name="controller" value="true" >
<param name="autoplay" value="false">
alt : <a href="intro.wmv">test movie</a>
</object>
</object>

Result:

alt : test movie 

Note:If your browser supports this object tag, video will display or you have to click on the link to view the video.

Comments

Popular Posts