Copyright © tutorialspoint.com

HTML Embed Multimedia - Movie, Music

previous next


Advertisements

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.

HTML - Video Media Types

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

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.


<img src="yourimage.gif"  alt="yourimage.gif" />

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.


<img src="yourimage.gif" alt="Your Image Will Display Here" />

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 optional codebase 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.


previous next

Copyright © tutorialspoint.com