Scribd
Upload
7 views13 pages

M2 Part4

Uploaded by

Aman
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
7 views13 pages

M2 Part4

Uploaded by

Aman
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/ 13

HTML5 Media and

Graphic Elements
HTML5 API’S
 HTML Geo location
 HTML Drag and Drop
 HTML Local Storage
 HTML Application Cache
 HTML Web Workers
 HTML SSE
Media Elements - Audio
 Find the type of file extension.
 Multimedia file formats : .avi, .mp3, .mp4, .wmv, .mpg, .wav,
and, .swf
<audio controls = “controls”>
<source src = “ .mp3 “type = “audio/mp3”>
<source src = “ .mpg” type = “audio/mpeg”>
</audio>
Attributes
Multimedia Elements - Video
<video controls = “controls”>
<source src = “ .mp3 “type = “video/mp3”>
<source src = “ .mpg” type = “video/mpeg”>
</video>
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>
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.
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>
Canvas - Line draw
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
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();
svg
<!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>
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>
THANK YOU

You might also like