Introduction

HTML5 brings two new Media Tags.
HTML5 Audio and HTML5 Video used to add media content on a webpage.

  • <audio> </audio>
  • <video> </video>

Now we don't require a third party plugin, or flash to play audio or video on our web-page. Earlier <embed> tags was used to include a flash file. Also a plugin ( Adobe Flash Player ) is required to run this. Chrome already include flash player, but for IE, and Mozila, we need to install Adobe Flash Player to run that video or audio. Youtube was used by maximum sites to play video using <iframe> tag.


HTML5 Audio Tag.

HTML5 Audio tag is used to play mp3, ogg and AAC files.


<!doctype html>
<html>
<head>
	<title>HTML5 Audio</title>
	< meta charset="utf-8">	
</head>

<body>
	<div class="wrap">
			<audio src="sound.mp3" controls>
				Your Browser Doesn't Support HTML5 Audio
			</audio>
	</body>
</html>		
		

Html5 Audio Player


Attributes in Audio Tag

Attribute Values Use
src song.mp3 to link Audio file with player
controls To show play/pause buttons, timeline and volume controller of the player.
autoplay "on" or "off". To play audio automatically.
loop To play audio continuously even after it ends.

HTML5 Video Tag

HTML5 Video tag or <video> is used to add videos on a webpage. Video tag supports mp4, ogg, mov and H.264 files.


<!DOCTYPE html>
<html>
<head>
   <title>HTML5 Audio</title>
   <meta charset="utf-8">
</head>

<body>
	<div class="wrap">
			<video src="video.mp4" controls>
				Your Browser Doesn't Support HTML5 Video.
			</video>
	</body>
</html>		
		

Html5 Video Player

Attributes in Video Tag

Attributes Values Use
src file.mp4 to link Video file with player
controls To show play /pause buttons, timeline, volume controller and full screen buttons on video player.
autoplay "on" or "off" To play video on page load.
loop To play video continuously even after it ends.
width in px Defines width of video player. ( in px or %)
height in px. if needed Defines height of video player. (in px or %)
poster image.jpg shows an image( jpg or png) on pageload. Will not work if autoplay is on
audio muted audio="muted" attribute will mute audio of video.
track file.ext track tag is used to add subtitles of video. See Example

<video width="400" controls  >
        <source src="video.mp4" type="video/mp4" >
       <track kind="captions" src="sub.vtt"
srclang="en-us" label="English" >
      </video>		  
		  

Track will work only in http:// protocol.

Browsers Compatibility

Chrome, Safari, Firefox 4, Opera, and IE9 support HTML5 Audio & Video. But we need to add iframe tag using conditional comments for IE 8 and below.