Presenter: Anus Zaman…Miss Parisa Halepoto.Video, Audio and SVG

HTML 5

Multimedia

What is Multimedia ?

Multi ( Multiple ) and Media !

So…. Information in multiple formats, including text , images,audio , video and animation :)

It makes the term Multimedia ..

VIDEO

• Shockwave• Microsoft Media Player• Quicktime• Real Player

But they all had the same issues.

• End users must install a plugin.• You need to upgrade the plugin constantly.• There is limited interaction with the rest of the page.

and if you think about using that today I will hit you! :p

VIDEO

• <video> element is a new feature added in HTML5.• <video> element is for embedding the video content on the

Web page.• <video> element if not supported by the browser then the

content between the start tag and end tag is displayed.• src attribute is used to link to the video file.

<video src=”D:\Source codes\movie.mp4”>

Your browser does not support the video

</video>

VIDEO

autoplay autoplayheight pixelsloop loopmuted mutedsrc URLwidth pixelspreload auto metadata noneposter URLcontrols controls

ValuesAttributes

VIDEO

Controls are differ from browser to browser...

Firefox

Opera

Safari

Chrome

Painful stuff – Codecs and conversion

Our job is now toconvert the videos werecord to these open

formats – which can beannoying.

The main annoyance isthat different browsers

support differentformats, which means

we need to provideseveral versions :(

• H.264 “MP4”• OGG/Vorbis• VP8 / WebM

• MP3• Ogg• Wav

AUDIO

• <audio> element will help the developer to embed music on the Web site.• <audio> tag specifies the audio file to be used in the HTML document.• src attribute is used to link the audio file.

• MP3, Ogg and Wav

AUDIO

<audio controls>

<source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element.</audio>

autoplay autoplayloop loopmuted mutedsrc URLpreload auto metadata nonecontrols controls

ValuesAttributes

SVG

What is SVG?• SVG stands for Scalable Vector Graphics• SVG is used to define vector-based graphics for the Web• SVG defines the graphics in XML format• SVG graphics do NOT lose any quality if they are zoomed or resized• Every element and every attribute in SVG files can be animated• SVG is a W3C recommendation• SVG integrates with other W3C standards such as the DOM and XSL

SVG

SVG Shapes !

• Rectangle <rect>• Circle <circle>• Ellipse <ellipse>• Line <line>• Path <path>• Polyline <polyline>• Polygon <polygon>

<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width=“1" fill="yellow" /></svg>

The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0,0)

SVG

<svg width="400" height="110"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /></svg>

<svg height="140" width="500"> <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /></svg>

<svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /></svg>

<svg height="210" width="500"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" /></svg>

SVG

<svg height="200" width="500"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /></svg>

<svg height="210" width="400"> <path d="M150 0 L75 200 L225 200 Z" /></svg>

<svg height="60" width="200"> <text x="0" y="15" fill="red" transform="rotate(30 20,40)"> MACINTOSH </text></svg>

SVG

SVG Stroke Properties !

• stroke• stroke-width• stroke-linecap• stroke-dasharray All the stroke properties can be applied to any kind of lines, text and outlines of elements like a circle.

SVG

Last But Not Least…

Inkscape is a free and open source software vector graphics editor.

Any thing else you want to know :-/

All images were took from google.com :p