HTML5 Video and Audio Tags
April 26, 2014In 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.
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>
<video> : Defines a video or movie
<source> : Defines multiple media resources for media elements
<track> : Defines text tracks in media players
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.
There are three types of video formats support in video element.
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>
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.
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.