Scribd
Upload
38 views23 pages

6-HTML Audio, Video, SVG and API's

The document discusses various HTML5 multimedia and graphic elements. It covers audio and video elements, specifying file formats and attributes. It also discusses the canvas element for drawing graphics via JavaScript, providing examples of drawing lines, circles and arcs. Finally, it mentions Scalable Vector Graphics (SVG) and some HTML5 APIs including geolocation, drag and drop, local storage and web workers.

Uploaded by

Charan Chowdary
Copyright
© © 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
38 views23 pages

6-HTML Audio, Video, SVG and API's

The document discusses various HTML5 multimedia and graphic elements. It covers audio and video elements, specifying file formats and attributes. It also discusses the canvas element for drawing graphics via JavaScript, providing examples of drawing lines, circles and arcs. Finally, it mentions Scalable Vector Graphics (SVG) and some HTML5 APIs including geolocation, drag and drop, local storage and web workers.

Uploaded by

Charan Chowdary
Copyright
© © 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
You are on page 1/ 23

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

You might also like