HTML5 brings two new Media Tags.
HTML5 Audio and HTML5 Video used to add media content on a webpage.
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 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>
|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 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>
|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
Track will work only in http:// protocol.
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.