HTML5 Audio and Video
HTML5 includes native audio and video support without the need for Flash or any other plug-ins. The HTML5 <audio> and <video> tags make it simple to add media to a website. It helps in configuring the src attribute to identify the media source and including controls attribute so the user can play and pause the media.
HTML5 Video – The simplest form of embedding a video file is
<video src=”foo.mp4″ width=”300″ height=”200″ controls>
Your browser does not support the <video> element.
</video>
The current HTML5 draft specification does not specify which video formats browsers should support in the video tag. But most commonly used video formats are:
- Ogg: Ogg files with Thedora video codec and Vorbis audio codec.
- mpeg4: MPEG4 files with H.264 video codec and AAC audio codec
The <source> tag is used to specify media along with media type and many other attributes. A video element allows multiple source elements and browser will use the first recognized format as
<video width=”300″ height=”200″ controls autoplay>
<source src=”/html5/foo.ogg” type=”video/ogg” />
<source src=”/html5/foo.mp4″ type=”video/mp4″ />
Your browser does not support the <video> element.
</video>
HTML5 Video Attribute – The HTML5 video tag can have a number of attributes to control the look and feel and various functionalities of the control as
| Attribute | Detail |
| autoplay | It specifies, whether video will automatically plays as soon as it can do so without stopping to finish loading the data. |
| autobuffer | It specifies, the video will automatically begin buffering even if it’s not set to automatically play. |
| controls | It allows user to control video playback, including volume, seeking, and pause/resume playback. |
| height | It specifies the height of the video’s display area, in pixels. |
| loop | It allows video automatically seek back to start after reaching at end. |
| preload | It specifies if video will be loaded at page load, and ready to run. |
| poster | This is a URL of an image to show until the user plays or seeks. |
| src | The URL of video to embed. The <source> element can also be used |
| width | It specifies the width of the video’s display area, in pixels. |
HTML5 Audio – HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML document as
<audio src=”foo.wav” controls autoplay>
Your browser does not support the <audio> element.
</audio>
The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav.
The <source> tag is used to specify media along with media type and many other attributes. An audio element allows multiple source elements and browser will use the first recognized format.
<audio controls autoplay>
<source src=”/html5/audio.ogg” type=”audio/ogg” />
<source src=”/html5/audio.wav” type=”audio/wav” />
Your browser does not support the <audio> element.
</audio>
HTML5 Audio Attribute – The HTML5 audio tag can have a number of attributes to control the look and feel and various functionalities of the control which are
| Attribute | Detail |
| autoplay | It specifies, whether audio will automatically plays as soon as it can do so without stopping to finish loading the data. |
| autobuffer | It specifies, the audio will automatically begin buffering even if it’s not set to automatically play. |
| controls | It allows user to control audio playback, including volume, seeking, and pause/resume playback. |
| loop | It allows audio automatically seek back to start after reaching at end. |
| preload | It specifies if audio will be loaded at page load, and ready to run. |
| src | The URL of audio to embed. The <source> element can also be used |
HTML5 Media Events – The HTML5 audio and video tag can have a number of attributes to control various functionalities of the control using Javascript as
| Event | Detail |
| abort | This event is for when playback is aborted. |
| canplay | This event is for when enough data is available that the media can be played. |
| ended | This event is for when playback completes. |
| error | This event is for when an error occurs. |
| loadeddata | This event is for when the first frame of the media has finished loading. |
| loadstart | This event is for when loading of the media begins. |
| pause | This event is for when playback is paused. |
| play | This event is for when playback starts or resumes. |
| progress | This event is for periodically to inform the progress of the downloading the media. |
| ratechange | This event is for when the playback speed changes. |
| seeked | This event is for when a seek operation completes. |
| seeking | This event is for when a seek operation begins. |
| suspend | This event is for when loading of the media is suspended. |
| volumechange | This event is for when the audio volume changes. |
| waiting | This event is for when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek). |
Following is the example which allows to play the given video:
<!DOCTYPE HTML>
<head>
<script type=”text/javascript”>
function PlayVideo(){
var v = document.getElementsByTagName(“video”)[0];
v.play();
}
</script>
</head>
<html>
<body>
<form>
<video width=”300″ height=”200″ src=”/html5/foo.mp4″>
Your browser does not support the <video> element.
</video>
<input type=”button” onclick=”PlayVideo();” value=”Play”/>
</form>
</body>
</html>
Apply for HTML5 Certification Now!!
http://www.vskills.in/certification/Certified-HTML5-Developer
