HTML5 Video and Audio Tags

April 26, 2014

In this page we will learn HTML5 Video and Audio Tags. HTML5 provides strong support for displaying media in very easy way. We will see in detail how to use while doing front end programming with the examples.

HTML5 Video Tag

<Video> element is advanced feature in HTML5. HTML5 defines a standard way to embed a video or movie on a web page. <video> tag add control attribute like play, pause, and volume. In <video> tag we can set height and width attribute. If height and width are set in <video> element, the space required for the video is reserved when the page is loaded. The Video tag is allow multiple <source> element for video play in web page.
Embedding media
This example plays a sample video, with playback controls -

<!DOCTYPE html>
<html>
<body>
    <video width="300" height="250" controls>
          <source src="movie2.mp4" type="video/mp4">
          <source src="movie2.ogg" type="video/ogg">
          Your Browser does not support video. 
    </video>
</body>
</html>

In video tag always insert text regarding video after source code inside <video>...</video> tags for browser information. You should define attribute in video tag, without attribute browser cannot define the size of video and cannot define space for video in browser. Find video tag description.
<video> : Defines a video or movie
<source> : Defines multiple media resources for media elements
<track> : Defines text tracks in media players

Test now.

Browser Support:
Html5 video element support higher version of browser, it's does not support earlier versions of browser. Supporting browsers are Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.

Video Formats and Browser Support
There are three types of video formats support in video element.

Note - *Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4.

HTML5 Audio Tag

<audio> tag is advanced featured in HTMLL5, <audio> tag is used to represent sound content in web page. HTML5 defines a new element which specifies a standard way to embed an audio file on a web page. One or more audio sources contain in inside <audio>..</audio> element. All src sources do not support all browsers.<audio> element contain one or more attribute for control sound in html web page like: autoplay, autobuffer, controls, loop, muted, preload.

<!DOCTYPE html>
<html>
  <body>
   <audio controls>
   <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
</body>
</html>

Controls attribute in <audio controls> add audio controls like play, pause and volume. The <audio> element allows multiple <source> elements. <source> elements can link to different audio files. We can write text in audio element, If browser can not run any source then text show message "Your browser does not support the audio element."

Test now.

Browser Support
Html5 <audio> element support higher version of browser, it's does not support earlier versions of browser. Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <video> element.

Audio Formats and Browser Support
HTML5 <audio> tags supported 3 type of file formats like: MP3, Wav, and Ogg: All browser do not support all formats of audio source file.

Note -*Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3.

Happy Learning...

HTML5 Video and Audio Tags

HTML5 Video Tag

HTML5 Audio Tag

About Us

Mobile Apps