The document discusses various ways to embed multimedia like video and audio into HTML pages using tags such as <embed>, <noembed>, and <bgsound>. It provides examples of how to embed different file types like MP3, MIDI, and MOV files. It also covers attributes of the <embed> tag that control playback features and formatting. Background audio using the <bgsound> tag is described as well.
Original Description:
Web Engineering Slides (Dr. Fareed Ahmed Jokhio , Department of CSE , QUEST Nawabshah)
The document discusses various ways to embed multimedia like video and audio into HTML pages using tags such as <embed>, <noembed>, and <bgsound>. It provides examples of how to embed different file types like MP3, MIDI, and MOV files. It also covers attributes of the <embed> tag that control playback features and formatting. Background audio using the <bgsound> tag is described as well.
The document discusses various ways to embed multimedia like video and audio into HTML pages using tags such as <embed>, <noembed>, and <bgsound>. It provides examples of how to embed different file types like MP3, MIDI, and MOV files. It also covers attributes of the <embed> tag that control playback features and formatting. Background audio using the <bgsound> tag is described as well.
HTML Embed Multimedia • Sometimes you need to add music or video into your web page. • The easiest way to add video or sound to your website 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. HTML Embed Multimedia • You can also include a <noembed> tag for the 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 if browser does not support <embed> tag. • Here is a simple example to play an embedded midi file: HTML Embed Multimedia • <html> • <head> • <title>HTML embed Tag</title> • </head> • <body> • <embed src="SongofShahAbdulLatif.mp3" width="100%" height="60" > • <noembed><img src="funny.png" alt="Alternative Media" ></noembed> • </embed> • </body> • </html> HTML Embed Multimedia • This will produce following result:
• You should have appropriate plug-in installed
to view the correct output. • If everything goes fine, you will get the following result. HTML Embed Multimedia • You can put any media file in src attribute. You can try it yourself by giving various types of files. The <embed> Tag Attributes • 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. The <embed> Tag Attributes • 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) The <embed> Tag Attributes • playcount – Specifies the number of times to play the sound. – This is alternate option for loop if you are using IE. • hidden – Specifies if the multimedia object should be shown on the page. – A false value means no and true values means yes. The <embed> Tag Attributes • width – Width of the object in pixels • height – Height of the object in pixels • name – A name used to reference the object The <embed> Tag Attributes • src – URL of the object to be embedded. • 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 Pictures Expert Group. Supported Video Types • <html> • <head> • <title>HTML embed Tag</title> • </head> • <body> • <embed src="ConstructionTitanicBelfast.mp4" width="200" height="200" > • <noembed><img src="funny.png" alt="Alternative Media" ></noembed> • </embed> • </body> • </html> 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. • 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. Background Audio • 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: Background Audio • <html> • <head> • <title>HTML embed Tag</title> • </head> • <body> • <bgsound src="/html/yourfile.mid"> • <noembed><img src="yourimage.gif" ></noembed> • </bgsound> • </body> • </html> Background Audio • This will produce blank screen. • This tag does not display any component and remains hidden. 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 examples: HTML Object tag • 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> HTML Object tag • Here alt attribute will come into picture if browser does not support object tag. HTML 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> HTML Object tag • 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> HTML Marquees • 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 <marquee> tag. HTML Marquees • Note: The HTML <marquee> tag may not be supported by various browsers so it’s not recommended to rely on this tag, instead you can use Javascript and CSS to create such effects. HTML Marquees • A simple syntax to use HTML <marquee> tag is as follows: • <marquee attribute_name="attribute_value"....more attributes> • One or more lines or text message or image • </marquee> The <marquee> Tag Attributes • 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. The <marquee> Tag Attributes • 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. The <marquee> Tag Attributes • 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. The <marquee> Tag Attributes • 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. The <marquee> Tag • Below are few examples to demonstrate the usage of marquee tag. • <html> • <head> • <title>HTML marquee Tag</title> • </head> • <body> • <marquee>This is basic example of marquee</marquee> • </body> • </html> The <marquee> Tag • This will produce following result: The <marquee> Tag • <html> • <head> • <title>HTML marquee Tag</title> • </head> • <body> • <marquee width="50%">This example will take only 50% width</marquee> • </body> </html> The <marquee> Tag • <html> • <head> • <title>HTML marquee Tag</title> • </head> • <body> <marquee direction="right">This text will scroll from left to right</marquee> • </body> </html> The <marquee> Tag • <html> • <head> • <title>HTML marquee Tag</title> • </head> • <body> <marquee direction="up">This text will scroll from bottom to up</marquee> • </body> </html> HTML Header • We have learnt that a typical HTML document will have following structure: • Document declaration tag • <html> • <head> • Document header related tags • </head> • <body> • Document body related tags • </body> • </html> • This lecture will give a little more detail about header part which is represented by HTML <head> tag. • The <head> tag is a container of various important tags like <title>, <meta>, <link>, <base>, <style>, <script>, and <noscript> tags. The HTML <title> Tag • The HTML <title> tag is used for specifying the title of the HTML document. • Following is an example to give a title to an HTML document: The HTML <title> Tag • <html> • <head> • <title>HTML Title Tag Example</title> • </head> • <body> • <p>Hello, World!</p> • </body> • </html> The HTML <title> Tag • This will produce following result: The HTML <meta> Tag • The HTML <meta> tag is used to provide metadata about the HTML document which includes information about page expiry, page author, list of keywords, page description etc. • Following are few of the important usages of <meta> tag inside an HTML document: The HTML <meta> Tag • <html> • <head> • <title>HTML Meta Tag Example</title> • <!-- Provide list of keywords --> • <meta name="keywords" content="C, C++, Java, PHP, Perl, Python"> • <!-- Provide description of the page --> • <meta name="description" content="Simply Easy Learning by Tutorials Point"> • <!-- Author information --> • <meta name="author" content="Tutorials Point"> • <!-- Page content type --> • <meta http-equiv="content-type" content="text/html; charset=UTF-8"> • <!-- Page refreshing delay --> • <meta http-equiv="refresh" content="30"> • <!-- Page expiry --> • <meta http-equiv="expires" content="Wed, 21 June 2006 14:25:27 GMT"> • <!-- Tag to tell robots not to index the content of a page --> • <meta name="robots" content="noindex, nofollow"> • </head> • <body> • <p>Hello, World!</p> • </body> • </html> The HTML <meta> Tag • This will produce following result: The HTML <base> Tag • The HTML <base> tag is used for specifying the base URL for all relative URLs in a page, which means all the other URLs will be concatenated into base URL while locating for the given item. • For example, all the given pages and images will be searched after prefixing the given URLs with base URL http://www.tutorialspoint.com/directory: The HTML <base> Tag • <html> • <head> • <title>HTML Base Tag Example</title> • <base href="http://www.tutorialspoint.com/" /> • </head> • <body> • <img src="/images/logo.png" alt="Logo Image"/> • <a href="/html/index.htm" title="HTML Tutorial"/>HTML Tutorial</a> • </body> • </html> The HTML <base> Tag • This will produce following result: The HTML <base> Tag • But if you change base URL to something else, for example, if base URL is http://www.tutorialspoint.com/home then image and other given links will become like http://www.tutorialspoint.com/home/images/ logo.png and http://www.tutorialspoint.com/home/html/in dex.htm The HTML <link> Tag • The HTML <link> tag is used to specify relationships between the current document and external resource. • Following is an example to link an external style sheet file available in css sub-directory within web root: The HTML <link> Tag • <html> • <head> • <title>HTML link Tag Example</title> • <base href="http://www.tutorialspoint.com/" /> • <link rel="stylesheet" type="text/css" href="/css/style.css"> • </head> • <body> • <p>Hello, World!</p> • </body> • </html> The HTML <link> Tag • This will produce following result: The HTML <style> Tag • The HTML <style> tag is used to specify style sheet for the current HTML document. • Following is an example to define few style sheet rules inside <style> tag: The HTML <style> Tag • <html> • <head> • <title>HTML style Tag Example</title> • <base href="http://www.tutorialspoint.com/" /> • <style type="text/css"> .myclass{ background-color: #aaa; padding: 10px; } </style> • </head> • <body> • <p class="myclass">Hello, World!</p> • </body> </html> The HTML <style> Tag • This will produce following result: The HTML <script> Tag • The HTML <script> tag is used to include either external script file or to define internal script for the HTML document. • Following is an example where we are using Javascript to define a simple Javascript function: The HTML <script> Tag • <html> • <head> • <title>HTML script Tag Example</title> • <base href="http://www.tutorialspoint.com/" /> • <script type="text/javascript"> • function Hello(){ • alert("Hello, World"); } • </script> • </head> • <body> • <input type="button" onclick="Hello();" name="ok" value="OK" /> • </body> </html>