Saturday, 11 July 2015

HTML5 Video Tutorial

The HTML video defines the video such as a movie clip or other video streams. The html5 video track is new in HTML5. The video tag is supported by almost all the browsers.
To implement the video you should use audio tag i.e. <video control> </video>. Any content between the opening and closing <video> is fallback content and this content is displayed only by browsers that don’t support the <video> tag.

Syntax:

<video src=”wildlife.mp4″ controls width=”480″ height=”360″></video>

Example:

<!DOCTYPE html>
<html>
<body><div style=”text-align:center”>
<button onclick=”makePlay()”>Play</button>
<button onclick=”makeStop()”>Stop</button>
<br>
<video id=”video1″ width=”420″>
<source src=”http://fullyhelp.com/html/wp-content/uploads/2013/11/VID-20130506-WA0000.mp4″ type=”video/mp4″>
<source src=”http://fullyhelp.com/html/wp-content/uploads/2013/11/VID-20130506-WA0000.mp4″ type=”video/ogg”>
</video>
</div><script>
var myVideo=document.getElementById(“video1″);function makeplay()
{
myVideo.width= 300;
}
function makestop()
{
myVideo.width=350;
}
</script>
</body>
</html>

Output:

Play
Stop




Browser Compatibility:

Browser mp4 webM ogg
Mozzila Firefox 3.6
Opera 10.6
Chrome 8.0
Safari 5.0

Standard Attributes:


Attribute Value Description
src url It specifies the URL of your audio file
width pixels It defines the width of video player.
Height pixels It defines the height of the video player.
autoplay Boolean attribute If this exists, the browser will directly play your video without asking permission from visitor.
control Boolean attribute It defines that you need this to make the native audio player appear. Otherwise, you would have to use DOM to control the audio element to play your music.

No comments:

Post a Comment