HTML Embedding Multimedia - Movie, Music

You can add music or video into your web page. The easiest way to add video or sound to your web site is to include the special HTML tag called <embed>. This tag causes the browser itself to include controls for the multimedia automatically. You do not need to have any ActiveX, Java VM, VBscript or JavaScript to support this <embed> tag.

t's also a good idea to include the <noembed> tag to support browsers which don't recognize the <embed> tag. You could, for example, use <embed> to display a movie of your choice, and <noembed> to display a single JPG image.

Here is a simple example to play embed a midi file:

<embed src="/html/yourfile.mid" width="100%" height="60" > <noembed><img src="yourimage.gif" ></noembed> </embed>

This will produce following result:

You can put any media file in src attribute. You can try it yourself by giving various files.

Attributes:

Following is the list of important attributes for <embed> element.

• align - Determines how to align the object. It takes either center, left or right.
• autostart - Indicates if the media should start automatically. Netscape default is true, Internet Explorer is false.
• 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). This is supported by Netscape only.
• playcount - Specifies the number of times to play the sound. This is alternat option forloop if you are usiong IE.
• hidden - Defines if the object shows on the page. A false value means no and true means yes.
• height - Height of the object in pixels or en.
• width - Width of the object in pixels or en.
• pluginspage - Specifies the URL to get the plugin software.
• name - A name used to reference the object.
• src - URL of the object to be embedded. This can be any recognizable by the user's browser. It could be .mid, .wav, .mp3, .avi and so on).
• volume - Controls volume of the sound. Can be from 0 (off) to 100 (full volume). This attribute is supported by Netscape only.

HTML - Video Media Types

Flash movies (.swf), AVI's (.avi), and MOV's (.mov) file types are supported by the embed tag.

• .swf files - are the file types created by Macromedia's Flash program.
• .wmv files - are Microsoft's Window's Media Video file types.
• .mov files - are Apple's Quick Time Movie format.
• .mpeg files - are movie files created by the Moving Pictures Expert Group.

Here is a simple example to play a flash file.

<embed src="/html/yourfile.swf" width="100%" height="250" > <noembed><img src="yourimage.gif" alt="yourimage.gif" /></noembed> </embed>

This will produce following result. Select a picture and paint it using virtual bursh.

To become more comfortable - Do Online Practice

Background Audio - The <bgsound> Element:

You can use the <bgsound> tag to play a soundtrack in the background. This tag is for Internet Explorer documents only. Other browsers ignore the tag. It 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 display.

This tag is having only two attributes loop and src. Both these attributes have same meaning as explained above.

Here is a simple example to play a small midi file:

<bgsound src="/html/yourfile.mid" > <noembed><img src="yourimage.gif" alt="yourimage.gif" /></noembed> </bgsound>

This will produce blank screen. This tag does not display any component and remains hidden.

Currently, Internet Explorer can handle three different sound format files: wav, the native format for PCs; au, the native format for most Unix workstations; and MIDI, a universal music-encoding scheme.

HTML Object tag:

HTML 4 introduces the <object> element, which offers an all-purpose solution to generic object inclusion. The <object> element allows HTML authors to specify everything required by an object for its presentation by a user agent

Here are few example:

You can embed a HTML document in an HTML document itself as follows:

<object data="data/test.htm" type="text/html" width="300" height="200"> alt : <a href="data/test.htm">test.htm</a> </object>

Here alt attribute will come into picture if browser does not support object tag.

You can embed a PDF document in an HTML document as follows:

<object data="data/test.htm" type="application/pdf" width="300" height="200"> alt : <a href="data/test.pdf">test.pdf</a> </object>

You can specify some parameters related to the document with the param tag. IE sometimes needs a src parameter to understand the location. Here is an exmaple to embed a wav file:

<object type="audio/x-wav" data="data/test.wav" width="200" height="20"> <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>

You can add a flash document as follows:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="penguin" codebase="someplace/swflash.cab" width="200" height="300"> <param name="movie" value="flash/penguin.swf" /> <param name="quality" value="high" /> <img src="penguin.jpg" width="200" height="300" alt="Penguin" /> </object>

You can add a java applet into HTML document as follows:

<object classid="clsid:8ad9c840-044e-11d1-b3e9-00805f499d93" width="200" height="200"> <param name="code" value="applet.class"> </object>

The classid attribute identifies which version of Java Plug-in to use. You can use the optionalcodebase attribute to specify if and how to download the JRE.

For a complete list of attributes of this object please check HTML Object Tag.

Referencing Audio, Video, and Images:

You can reference any external document, regardless of type or format, via a conventional anchor tag:

Here is an example to reference an audio file. Similar way you can refer any world document, PDF file, zip file etc.

If you want to listen music then <a href="/html/yourfile.mid" target="_blank" > Click Here </a>

This will produce following result:

If you want to listen music then Click Here

Just like any referenced document, the server delivers the desired multimedia object to the browser when the user selects the link. If the browser finds that the document is not HTML or XHTML but rather some other format, it automatically invokes an appropriate rendering tool to display or otherwise convey the contents of the object to the user.

Browsers identify and specially handle multimedia files from one of two different hints: either from the file's Multipurpose Internet Mail Extension (MIME) type, provided by the server, or from a special suffix in the file's name. The browser prefers MIME because of its richer description of the file and its contents, but it will infer the file's contents (type and format) from the file suffix: .gif or .jpg, for GIF and JPEG encoded images, for example, or .au for a special sound file.