HTML5 - Audio & Video

The HTML5 <audio> and <video> tags are used add multimedis media to a
website. You need to set src attribute to identify the media source and include a
controls attribute so the user can play and pause the media.
The HTML5 <audio> and <video> tags are used add multimedis media to a
website. You need to set src attribute to identify the media source and include a
controls attribute so the user can play and pause the media.
Test your browser compatibility

<video src=“seointro.mp4" width="300" height="200" controls>

Your browser does not support the <video> element.
</video>
Code snippet

<video width="300" height="200" controls autoplay>

<source src=“https://www.seoskills.in/seointro.ogg" type="video/ogg" />
<source src https://www.seoskills.in/seointro.mp4" type="video/mp4" />
Your browser does not support the video element.
</video>
Attributes list

• autoplay .
• autobuffer
• controls
• Height
• width
• loop
• Preload
• poster
• src
Audio tag example snippet

<audio controls autoplay>

<source src=“media/companyintro.ogg" type="audio/ogg" />
<source src=“media/companyintro.wav" type="audio/wav" />
Your browser does not support the audio element.
</audio>
HTML5 - SVG

SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical
applications in XML and the XML is then rendered by an SVG viewer.

SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate
system etc.
HTML5 - SVG

SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical
applications in XML and the XML is then rendered by an SVG viewer.

SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate
system etc.
 HTML5 – SVG Code Example

<style>
<svg id="svgelem" height="200" #svgelem {
xmlns="http://www.w3.org/2000/svg"> position: relative;
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" /> left: 50%;
</svg> -webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
 HTML5 – SVG Code Example

<style>
<svg id="svgelem" height="200" #svgelem{
xmlns="http://www.w3.org/2000/svg"> position: relative;
<rect id="redrect" width="300" height="100" fill="red" left: 50%;
/> -webkit-transform: translateX(-50%);
</svg> -ms-transform: translateX(-50%);
transform: translateX(-50%);
} </style>
 HTML5 – SVG Code Example

<style>
<svg id="svgelem" height="200" #svgelem{
xmlns="http://www.w3.org/2000/svg"> position: relative;
<ellipse cx="100" cy="50" rx="100" ry="50" fill="red" /> left: 50%;
</svg> -webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
New types for <input> tags

• color
• date
• datetime-local
• datetime
• email
• month
• numberrange
• Numeric
• search
• tel
• time
• url
• week
New types for <input> tags

• color
• date
• datetime-local
• datetime
• email
• month
• numberrange
• Numeric
• search
• tel
• time
• url
• week