HTML5 - Audio & Video
What is HTML5 Audio & Video
As part of the feature of HTML5, Native audio and video support is available without the need for Flash
The HTML5 <audio> and <video> tags make it really easy to add media to a web page. Although, you need to specify the src attributes to get the media source and also include attribute so that the user can play and pause the media
Embedding Video
The code below is the simplest way of embedding a video file in a webpage:
<video src = "foo.mp4" width = "300" height = "200" controls> Your browser has no support for the <video> element. </video>
The latest HTML5 draft specification doesn't really list out which video formats browsers should have support for in the video tag. But the most popularly used video formats are:
1. Ogg − Ogg files with Theodora video codec and Vorbis audio codec.
2. mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec.
You can make use of the <source> HTML5 tag to specify media together with the media type and also other attributes. A video element accept multiple source element and the browser will make use of the format it recognizes first:
<!DOCTYPE HTML> <html> <body> <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> </body> </html>
Video Attribute Specification
The HTML5 video tag can possess a number of attributes to control the look and feel and also various functionalities of the control:
| Sr.No. | Attribute & Description |
|---|---|
| 1 |
autoplay This is a boolean attribute, if it is specified, the video will automatically start to playback as soon as it can do so without stopping to finish loading the data. |
| 2 |
autobuffer This is a boolean attribute if it is specified, the video will automatically start buffering even if it's not set to play automatically. |
| 3 |
controls If this attribute is available, it will let the user control video playback, including volume, seeking, and pause/resume playback. |
| 4 |
height This attribute deals with specifying the height of the video's display area, in pixels. |
| 5 |
loop This is a boolean attribute, if it is specified, it will allow video automatically seek back to the start after reaching the end. |
| 6 |
preload This attribute deals with specifying that the video will be loaded at page load, and ready to run. Ignored if autoplay is present. |
| 7 |
poster This is a URL of an image or placeholder to show until the user plays or seeks. |
| 8 |
src The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed. |
| 9 |
width This particular attribute specifies the width of the video's display area, in pixels. |
Embedding Audio
HTML5 has support for the <audio> tag which is mainly used to add sound content in an HTML or XHTML document, an example is below:
<audio src = "foo.wav" controls autoplay> Your browser does not support the <audio> element. </audio>
You can make use of the <source> HTML5 tag to specify media together with the media type and also other attributes. A video element accept multiple source element and the browser will make use of the format it recognizes first:
<!DOCTYPE HTML> <html> <body> <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> </body> </html>
Audio Attribute Specification
The HTML5 video tag can possess a number of attributes to control the look and feel and also various functionalities of the control:
| Sr.No. | Attribute & Description |
|---|---|
| 1 |
autoplay This is a boolean attribute, if it is specified, the audio will automatically begin to playback as soon as it can do so without stopping to finish loading the data. |
| 2 |
autobuffer This is a boolean attribute, if it is specified, the audio will automatically begin buffering even if it's not set to automatically play. |
| 3 |
controls If this attribute is available, it will let the user control audio playback, including volume, seeking, and pause/resume playback. |
| 4 |
loop This is a boolean attribute, if it is specified, it will allow audio automatically to seek back to the start after reaching the end. |
| 5 |
preload This attribute is meant for specifying that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present. |
| 6 |
src The URL of the audio to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed. |
Handling Media Events
The HTML5 audio and video tag can have a number of attributes to control various functionalities of the control using JavaScript −
| S.No. | Event & Description |
|---|---|
| 1 |
abort This event is triggered when playback is aborted. |
| 2 |
can play This event is triggered when enough data is available that the media can be played. |
| 3 |
ended This event is triggered when the playback completes. |
| 4 |
error This event is triggered when an error occurs. |
| 5 |
loaded data This event is triggered when the first frame of the media has finished loading. |
| 6 |
loadstart This event is triggered when the loading of the media begins. |
| 7 |
pause This event is triggered when playback is paused. |
| 8 |
play This event is triggered when playback starts or resumes. |
| 9 |
progress This event is triggered periodically to inform the progress of downloading the media. |
| 10 |
ratechange This event is triggered when the playback speed changes. |
| 11 |
seeked This event is triggered when a seek operation completes. |
| 12 |
seeking This event is triggered when a seek operation begins. |
| 13 |
suspend This event is triggered when the loading of the media is suspended. |
| 14 |
volumechange This event is triggered when the audio volume changes. |
| 15 |
waiting This event is triggered when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek). |
The code below allows playing of a given video:
<!DOCTYPE HTML> <html> <head> <script type = "text/javascript"> function PlayVideo() { var v = document.getElementsByTagName("video")[0]; v.play(); } </script> </head> <body> <form> <video width = "300" height = "200" src = "/html5/foo.mp4"> Your browser does not support the video element. </video> <br /> <input type = "button" onclick = "PlayVideo();" value = "Play"/> </form> </body> </html>
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
