Audio and Video in HTML5

HTML5 brings two new Media Tags. HTML5 Audio and HTML5 Video tags are used to add media content on a webpage. Chrome 3+, firefox 3.5+, safari 4+ and IE 9+ supports both Audio and video tags.

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.

Even Flash is almost removed from web market. Chrome 55 and above block flash content on a website and require permission to run flash. With the introduction of Audio and video tags, sharing multimedia becomes an integral part of web.


HTML5 Audio

HTML5 Audio tag is used to play audio files, like mp3, ogg and AAC. All browsers supporting audio tag are having build in player.

The easiest way to include Audio Tag in a webpage is to use audio tag. src is compulsory attribute in audio tag. controls attribute can show controlbar to user. user can play/pause, change timeline, mute, and increase volume of audio playing.

HTML5 Audio Example

     
    <audio src="sound.mp3" controls>
        Your Browser Doesn't Support HTML5 Audio
    </audio>
		

Attributes in Audio Tag

Attribute Values Use
src song.mp3 to link Audio file with player Compulsory
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.
controlsList nodownload To disable download button in chrome 55 onwards

HTML5 Video

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

To embed a video, create a video tag. src is compulsory attribute for video tag. controls attribute can add play/pause button, video timeline, mute button, volume controller, full screen, subtitles options on player


        <video src="video.mp4" controls>
            Your Browser Doesn't Support HTML5 Video.
        </video>
		
		

Html5 Video Player

Attributes in Video Tag

Attributes Values Use
src file.mp4 to link Video file with player Compulsory
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)
height in px. if needed Defines height of video player. (in px)
controlsList nodownload To disable download button in chrome 55 onwards
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 sub.vtt 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.