HTML - Audio & Video
Embedding Video
Here is the simplest form of embedding a video file in your webpage
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>
The current HTML5 draft specification does not specify which video
formats browsers should support in the video tag. But most commonly
used video formats are −
• Ogg − Ogg files with Thedora video codec and Vorbis audio
codec.
• mpeg4 − MPEG4 files with H.264 video codec and AAC audio
codec.
You can use <source> tag to specify media along with media type and
many other attributes.
A video element allows multiple source elements and browser will use
the first recognized format –
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls autoplay>
<source src = "/html5/foo.ogg" type ="video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the <video> element.
</video>
</body>
</html>
This will produce the following result –
Embedding Audio
• HTML5 supports <audio> tag which is used to embed sound
content in an HTML or XHTML document as follows.
<audio src = "foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>
The current HTML5 draft specification does not specify which audio
formats browsers should support in the audio tag. But most commonly
used audio formats are ogg, mp3 and wav.
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>
This will produce the following result −
Following is the example which allows to play the given video –
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function PlayVideo() {
var v = document.getElementsByTagName("video")[0];
v.play();
}
</script>
</head>
<body>
<form>
<video width = "300" height = "200" src = "/html5/foo.mp4">
Your browser does not support the video element.
</video>
<br />
<input type = "button" onclick = "PlayVideo();" value =
"Play"/>
</form>
</body>
</html>
This will produce the following result −
Hyperlink
• With HTML, easily add hyperlinks to any HTML page.
• Link team page, about page, or even a test by creating it a
hyperlink.
• You can also create a hyperlink for an external website.
• To make a hyperlink in an HTML page, use the <a> and </a>
tags, which are the tags used to define the links.
The <a> tag indicates where the hyperlink starts and the </a> tag
indicates where it ends.
Whatever text gets added inside these tags, will work as a hyperlink.
Add the URL for the link in the <a href=” ”>. Just keep in mind that
you should use the <a>…</a> tags inside <body>…</body> tags.
Example
You can try to run the following code to insert a hyperlink in an HTML
page
<!DOCTYPE html>
<html>
<head>
<title>HTML Hyperlinks</title>
</head>
<body>
<h1>Company</h1>
<p>
We’re a <a href="/about/about_team.htm">team</a> of
professionals working
hard to provide free learning content.
</p>
</body>
</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 <marquees> tag.
Note − The <marquee> tag deprecated in HTML5. Do not use this
element, instead you can use JavaScript and CSS to create such effects.
Syntax
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
Following is the list of important attributes which can be used with
<marquee> tag.
Sr.No Attribute & Description
1 width
This specifies the width of the marquee. This can be a value
like 10 or 20% etc.
2 height
This specifies the height of the marquee. This can be a value
like 10 or 20% etc.
3 direction
This specifies the direction in which marquee should scroll.
This can be a value like up, down, left or right.
4 behavior
This specifies the type of scrolling of the marquee. This can
have a value like scroll, slide and alternate.
5 scrolldelay
This specifies how long to delay between each jump. This will
have a value like 10 etc.
6 scrollamount
This specifies the speed of marquee text. This can have a value
like 10 etc.
7 loop
This specifies how many times to loop. The default value is
INFINITE, which means that the marquee loops endlessly.
8 bgcolor
This specifies background color in terms of color name or
color hex value.
9 hspace
This specifies horizontal space around the marquee. This can
be a value like 10 or 20% etc.
10 vspace
This specifies vertical space around the marquee. This can be
a value like 10 or 20% etc.
Below are few examples to demonstrate the usage of marquee tag.
Examples - 1
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>
Examples - 2
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee width = "50%">This example will take only 50%
width</marquee>
</body>
</html>
Examples - 3
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "right">This text will scroll from left to
right</marquee>
</body>
</html>
Examples - 4
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "up">This text will scroll from bottom to
up</marquee>
</body>
</html>
