Lesson 10. HTML5 Audio and Video elements

html5-audio-plugins

HTML5 Audio and Video elements

Hello guys, In this tutorial we will walk through the process of using html5 audio tag and video tag.

Introduction of html5 audio and video tag has been done to remove its dependencies on etra plugins, its very light weight.

In HTML5 there is no necessity to use plugins like silverlight or flash in short we can directly embed. For example <audio> meant for sound content, <video>meant for a video or movie, etc.

You may also like these tutorials:

here is our html5 audio and video elements tutorial.

Embedding html5 audio and Video tags in our webpage.

Whenever we have to use the <video> tag it is recommended to set the following attributes:

  • controls attribute, it is used for controls. So the user can play and pause the media at there own.
  • src attribute, it is use to identify the media source
  • height and width. It is recommended that we can set the height and width attributes in order to prevent the layout of changing during loading (while the video loads).

NOTE: A<video> element allows multiple <source> elements which can link to different videos. And it depends on browser will use the first recognized format.

HTML5 Beginners

HTML5 Beginners

html5 audio tag supporting formats.

NOTE: HTML5 currently supports the following video formats are as follows :

  1. MP4
  2. WebM
  3. and Ogg

<video src=”samplevideo.mp4″ width=”450″ height=”300″ controls><source src=”video1.mp4″ type=”video/mp4″>

<source src=”vide1.ogg” type=”video/ogg”>

</video>

Here we can see our “HTML5 audio and video elements” document for us:

<!DOCTYPE html><html>

<body>

<div>

<button onclick=”playPause()”>Play/Pause</button>

<br>

<video id=”myvideo1″ width=”420″>

<source src=”sample1.mp4″ type=”video/mp4″>

</video>

</div>

</body>

<script>

var myVideo=document.getElementById(“myvideo1”);

 

function playPause()

{

if (myVideo.paused)

myVideo.play();

else

myVideo.pause();

}

 

</script>

</html>

Video Live Streaming

We have demonstrated our example below, streaming of a video using the <video>tag:

<video width=”320″ height=”250″ controls>
<source src=”http://media.ch9.ms/ch9/9826/a8204213-5530-4743-90d2-e3e3b58b9826/Channel9turns9.mp4″ type=”video/mp4″>
The browser does not support this video tag
</video>

[youtube id=”0vrdgDdPApQ” align=”center” mode=”normal” autoplay=”yes” maxwidth=”600″]
Video Formats & Browser Support

As we know there is always an exception, similarly all mobile browsers support all formats but as usual below are some exceptions:

Browsers MP4 formats WebM formats Ogg formats
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES NO NO
Opera 10.6+ NO YES YES

Embedding html5 Audio only into our webpage

HTML5-audio-video-elements

Now moving to an AUDIO tag, we can use it in a similar way the <audio> tag to play sounds.

Supported formats are as follows:

  1. MP3
  2. Wav
  3. and Ogg

<!DOCTYPE html>

<html>

<body>

<div>

<audio id=”myaudio1″ width=”420″>

<source src=”sample1.mp4″ type=”audio/wav”>

</audio>

</div>

</body>

</html>

Audio Formats & Browser Support

Guys again, As we know there is always an exception, similarly all mobile browsers support all formats but as usual below are some exceptions for an AUDIO:

Browser MP3 Wav Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES YES NO
Opera 10+ NO YES YES

auidio_html5_post

 

Source:  http://www.w3.org, www.google.com, www.dev.moz.org.

html5 audio and video elements has improve our page load performance.

html5 audio and video tags has made our page lightweight .

You Might Also Like