Tuesday, December 19, 2017

How to Embed Multimedia into a Html web page(web design)

Hello guys morning, welcome to this section of my tutorial, in this post am gonna be talking about how to embed various multimedia files such as videos and audios into a HTML web page.
Sometiimes you need to add music or video into your web page. The best and easiest way to do tha 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 <nonembed> tag for browsers that don't support the <embed> tag. You could, for example use <embed> to display a movie of your choice, and <nonembed> to display a single JPG image if the browser does not support <embed> tag.

Example 
Here is a brief example on how to play an embed midi file on your web page:
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title> 
</head>
<body>
<embed  src="/html/yourfile.mid"  width="100%"  height="60">  
<nonembed><img src="your image.jpg"  alt="Alternative media"> </nonembed>
</embed>
</body>
</html>

You can try the above code out with an actual URL of your media and images, feel free to drop your questions in the comment box below if you having any difficulties. 

The <embed> Tag Attributes 
Below are the list of important attributes which can be used with <embed> tag.

Attributes                                          Description
align                      Determines how to align the object. It can be set 
                              to either center, left or right. 

autostart                This attribute indicates if the media file should 
                              start automatically, you can set it to either true 
                              or false.

loop                      Specifies if the sound should be played 
                             continuosly (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 an alternative for loop if you are using IE.

hidden                   Specifies if the multimedia object should be 
                              shown on the web page. A false value means no 
                              and true value 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 embeded. 

volume                   Controls volume of the sound. 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 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 Picture 
     Expert Group. 

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title> 
</head>
<body>
<embed  src="/html/yourfile.swf"  width="140%"  height="80">  
<nonembed><img src="your image.jpg"  alt="Alternative media"> </nonembed>
</embed>
</body>
</html>
  
You can also try the above code out for better understanding and feel free to ask your questions.

Background Audio 
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. Its downloads and plays an audio file when the host document is first downloaded by the user and displayed. The background  sound file also will reply whenever the user refreshes the browser.
This tag having only two attributes which are loop and src.Both of these attribures have same meaning as the once explained above.
Let take a look at a brief examole below on how to play a small midi file.

Example
 <!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title> 
</head>
<body>
<bgsound  src="/html/yourfile.mid">  
<nonembed><img src="your image.jpg"  alt="Alternative media"> </nonembed>
</bgsound>
</body>
</html>

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.

Below are few examples:


Example 1
You can embed a HTML document in a HTML document itself as follows:

<object data="data/test.html"  type="text/html"  width="250" height="150" >
alt : <a href="data/test.html">test.html</a>
</object>
In this case the attribute will come into picture if the browser does not support object tag.

Example 2
You can embed a PDF document in a HTML document as follows:

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

Example 3 
You can specify some parameters related to the document with the <param> tag. Below is a brief example to embed a wav file:

<object data="data/test.wav"  type="audio/x-wav"  width="200"  height="100" >
<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 flash document as follows:

<object classid="clasid:D27CDB6E-AE6D-11cf-96B8-444553540000"  id="penguin"  codebase="someplace/swflash.cab"  width="200"  height="100" >

<param name="movie"  value="flash/penguin.swf" />
<param name="quality"  value="high" />

<img src="penguin.jpg"  width="200"  height="150"  alt="penguin" />
</object>

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

<object classid="clasid:8ad9c840-044e-11d1-b3e9-00805f499d93"  width="200"  height="100" >

<param name="code"  value="applet.class" />

 </object>

Well thats it on this tutorial, see you on my next tutorial and don't forget to suscribe to our email list, bye for now.


Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration, Html Basic Tags, Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content , HTML-Phrase TagsHtml-Phrase Tags[CONCLUSION] , Html-Meta Tags , Html-Comments , Html Images , Html Tables , Html Tables(Conclusion) , Html List , Html Text Links , Html Image LinksHtml Frames , Html Iframes , Html Blocks , Html Backgrounds , Html Fonts , How to create Html Forms (Web Design Tutorial)
Share:

0 comments:

Post a Comment