HTML5 Media and
Graphic Elements
Dr. Maheswari S,
VIT Chennai
2
Multimedia Elements
Multimedia on the web is sound, music, videos, movies, and
animations.
Dr. Maheswari S VIT Chennai
3
Media Elements - Audio
Find the type of file extension.
Multimedia file formats : .avi, .mp3, .mp4, .wmv, .mpg, .wav,
and, .swf
Only MP3, WAV, and Ogg audio are supported by the HTML
standard.
<audio controls = “controls”>
<source src = “ .mp3 “type = “audio/mp3”>
<source src = “ .mpg” type = “audio/mpeg”>
</audio>
Dr. Maheswari S VIT Chennai
4
Attributes
Dr. Maheswari S VIT Chennai
5
Multimedia Elements - Video
<video controls = “controls”>
<source src = “ .mp3 “type = “video/mp3”>
<source src = “ .mpg” type = “video/mpeg”>
</video>
Dr. Maheswari S VIT Chennai
6
Common Video Formats
The MP4, WebM, and Ogg formats are supported by HTML.
The MP4 format is recommended by YouTube.
Dr. Maheswari S VIT Chennai
7
Example
<video width = “450” height = “340” controls autoplay>
<source src = “mov.ogg” type = “video/ogg”/>
<source src = “mov.webm” type = “video/webm”/>
Browser does not support the video tag
</video>
Dr. Maheswari S VIT Chennai
8
<video> poster Attribute
The HTML <video> poster Attribute is used to display the image while video downloading or when user
click the play button. If this image not set then it will take the first frame of video as a poster image.
Syntax:
<video poster="URL">
Attribute Values: It contains a single value URL which specifies the link of source image. There are two
types of URL link which are listed below:
Absolute URL: It points to another webpage.
Relative URL: It points to other files of the same web page.
Dr. Maheswari S VIT Chennai
9
<video> muted Attribute
The HTML <video> muted Attribute is used to specify the audio
output of the video is muted, it is a Boolean attribute.
Syntax:
<video muted>
Dr. Maheswari S VIT Chennai
10
Example
<body style="text-align:center">
<h1 style="color:green"> VIT </h1>
<h2 style="font-family: Impact"> HTML Video muted Attribute </h2> <br>
<video id="Test_Video"
width="360"
height="240"
controls muted>
<source src="samplevideo.mp4" type="video/mp4">
</video>
</body>
Dr. Maheswari S VIT Chennai
11
Output
Dr. Maheswari S VIT Chennai
12
Canvas
It uses JavaScript to draw
graphics on a web page.
Rectangular area and control
every pixel of it.
Several methods - drawing
paths, boxes, circles,
characters, and adding
images.
Dr. Maheswari S VIT Chennai
13
Syntax
<canvas id="myCanvas" width="200“
height="100"></canvas>
To add border:
<canvas id="myCanvas" width="200" height="100“
style="border:1px solid #000000;">
</canvas>
Dr. Maheswari S VIT Chennai
14
Canvas - Line draw
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Dr. Maheswari S VIT Chennai
15
Arc() method
The arc() method is used to create an arc/curve i.e. circles, or parts of circles.
Syntax:
context.arc(x, y, r, sAngle, eAngle, counterclockwise);
Parameters:
x: This parameter specifies the x-coordinate of the center of the circle.
y: This parameter specifies the y-coordinate of the center of the circle.
r: This parameter specifies the radius of the circle.
sAngle: This parameter specifies the starting angle, in radians( 3 o’clock position of the arc’s circle denotes 0).
eAngle: This parameter specifies the ending angle in radians.
counterclockwise: This parameter specifies the drawing should be clockwise or anticlockwise. It is false by default which
denotes clockwise.
Dr. Maheswari S VIT Chennai
16
arcTo() method
The canvas arcTo() Method is used to create an arc/curve between two tangents on the canvas.This method defines an
arc in the extension of a straight line or another figure. This method is generally used to create rounded corners.
Syntax:
context.arcTo( x1, y1, x2, y2, r );
Parameters:
x1: This parameter specifies the x-coordinate of the first tangent.
y1: This parameter specifies the y-coordinate of the first tangent.
x2: This parameter specifies the x-coordinate of the second tangent.
y2: This parameter specifies the y-coordinate of the second tangent.
r: This parameter specifies the radius of the arc.
Dr. Maheswari S VIT Chennai
17
Canvas - Circle
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Dr. Maheswari S VIT Chennai
18
svg – Scalable Vector Graphics
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green"
stroke-width="4"fill="yellow" />
</svg>
</body>
</html>
Dr. Maheswari S VIT Chennai
19
<html>
<head>
<title> Draw a Star Using SVG</title>
</head>
<body>
<svg width="2000" height="2000">
<polygon points="100,9 50,200 180,75 10,75 160,200"
style="fill:blue;stroke:red;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
Dr. Maheswari S VIT Chennai
20
Dr. Maheswari S VIT Chennai
21
HTML5 API’S
HTML Geo location
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE
Dr. Maheswari S VIT Chennai
22
Google map
<body>
<h1>My First Google Map</h1>
<div id="map" style="width:400px;height:400px;"></div>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
</body> Dr. Maheswari S VIT Chennai
23
Dr. Maheswari S VIT Chennai
THANK YOU
