0% found this document useful (0 votes)
177 viewsLecture 13 - HTML Embed Multimedia
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.
Uploaded by
Tanveer Ahmed HakroCopyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
177 viewsLecture 13 - HTML Embed Multimedia
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.
Uploaded by
Tanveer Ahmed HakroCopyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
/ 54
HTML Embed Multimedia
Dr. Fareed Ahmed Jokhio
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>