Embeded Multimedia and Marquees in HTML - SwatiMaurya08/html-notes GitHub Wiki
Sometimes you need to 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 provided browser supports <embed>
tag and given media type.
You can also include a <noembed>
tag for the browsers which don't recognize the <embed>
tag. You could, for example, use to display a movie of your choice, and <noembed>
to display a single JPG image if browser does not support <embed>
tag.
Following is the list of important attributes which can be used with <embed>
tag.
- align - Determines how to align the object. It can be set to either center, left or right.
- autostart- This boolean attribute indicates if the media should start automatically. You can set it either true or 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)
- playcount- Specifies the number of times to play the sound. This is alternate option for loop if you are usiong IE.
- hidden- Specifies if the multimedia object should be shown on the page. A false value means no and true values means yes.
- width- Width of the object in pixels
- height- Height of the object in pixels
- name- A name used to reference the object.
- src- URL of the object to be embedded.
- volume- Controls volume of the sound. Can be from 0 (off) to 100 (full volume).
You can use various media types like Flash movies (.swf), AVI's (.avi), and MOV's (.mov) file types inside 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.
You can use HTML <bgsound>
tag to play a soundtrack in the background of your webpage. This tag is supported by Internet Explorer only and most of the other browsers ignore this 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.
This tag is having only two attributes loop and src. Both these attributes have same meaning as explained above.
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 a few examples −
Example - 1 You can embed an 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.
Example - 2 You can embed a PDF document in an HTML document as follows −
<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
alt : <a href = "data/test.pdf">test.htm</a>
</object>
Example - 3
You can specify some parameters related to the document with the <param>
tag. Here is an example to embed a wav file −
<object data = "data/test.wav" type = "audio/x-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>
Example - 4 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>
Example - 5 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.
An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings. This is created by using HTML <marquees>
tag.
A simple syntax to use HTML tag is as follows −
<marquee attribute_name = "attribute_value"....more attributes>
One or more lines or text message or image
</marquee>
- width - This specifies the width of the marquee. This can be a value like 10 or 20% etc.
- height - This specifies the height of the marquee. This can be a value like 10 or 20% etc.
- direction - This specifies the direction in which marquee should scroll. This can be a value like up, down, left or right.
- behavior - This specifies the type of scrolling of the marquee. This can have a value like scroll, slide and alternate.
- scrolldelay - This specifies how long to delay between each jump. This will have a value like 10 etc.
- scrollamount - This specifies the speed of marquee text. This can have a value like 10 etc.
- loop - This specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly.
- bgcolor - This specifies background color in terms of color name or color hex value.
- hspace - This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.
- vspace - This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.