Audio and Video tags in HTML5

Introduction to HTML5 with <Audio> and <Video> tags
One of the most popular tags of HTML5 is its Audio and Video tag. The prime reason for this popularity of these two tags specially is its uniqueness that, these tags help the user to make video and audio streaming without using any flash player or silver light installed into the browser. So, the programmer can embed now any video or Audio file into the webpage and the end users be able to run those Audios and Videos even if they do not have flash or Microsoft's silver light installed into their browser.

In this HTML5 tutorial, I have explained the <Audio> and <Video> tags. Audio and Video tags embedding through HTML5 have come with great success. Inclusion of Audio or Video tags and giving controls to the user makes it unique. Audio or Video tags used in HTML5 webpages don't require much coding and are too simple to code.
Audio tags in HTML5 also contain some user friendly attributes, like, auto play, controls, mute and loop etc. these attributes in audio gives you complete control over the audio playing. User can mute the audio, can pause it, can make it playing in loop, can use the seek feature of video playing and many more.

Here below are the simple codes.


<audio controls="controsl" autoplay="autoplay" loop="loop">
<source src="rhymes.mp3" type="audio/mp3" />
<source src="rhymes.ogg" type="audio/ogg" />
Your browser does not support the audio element.

Here in the code, controls, autoplay and loop are the attributes. Similarly you can use mute attribute in the above code. In the code I have given two codecs that is .mp3 and .ogg. Since different browsers have different settings, browsers search for he specific codec before playing the audio file. So, if incase the mp3 format do not get supported, browser will try with ogg file format. And when the required format encountered it will start playing the audio.
Similarly almost the same codes are used for videos. <Video> tags too include the same attributes with some extra attributes for its size of pane and frame etc.
Video tags in HTML5 is now the most popular of all the tags and elements introduced in HTML5. The codes for embedding Videos using HTML5 is also equivalently simple as with the audios.

Here below are the codes for a video tags used in HTML5.


<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

Video elements also containing different codec for the same reason. The browser keep searching for the required codec till it encounter with the perfect codec to play the videos.

If your browser doesn't support any of the audio or video elements, your browser will give the response saying "Your browser does not support the video/audio tag.
With these two tags another tag of HTML5 which is getting huge popularity among the programmers is <canvas> tag. Canvas tag is used in making creative art on web pages and also in developing games using HTML5. I have explained about <canvas> tag in my another post in this site My Windows Club. please check that post too, you will find the tag more interesting to learn.
Or you can to the post directly from this link given:
Canvas elements in HTML5. This Canvas tag is lot more interesting to learn.

Audio and Video tags in HTML5

Post Comment:

Online Members

RSS Feeds