HTML5 Audio & Video - HTML 5
Interview Questions
Practice Test
Pragnyameter Exam
All Tutorials
Job SearchHow to use Audio & Video in HTML5?
Native audio and video are included in HTML5 features to support without the need for Flash.
HTML5 <audio> and <video> tags make adding media to website easy and for this user has to set src attribute to identify the media source and include a controls attribute play and pause the media.
Embedding Video
Below is the simplest form of embedding a video file in your webpage
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.
<Source> tag can be used to specify media along with media type and many other attributes. Video element allows multiple source elements but browser uses the first recognized format
This will produce following result −
Video Attribute Specification
HTML5 video tag can have a number of attributes for controlling look and feel and various functionalities of the control
|
Attribute |
Description |
|
autoplay |
autoplay boolean attribute if specified, video will automatically begin to play back as soon as it can do so without stopping to finish loading the data. |
|
autobuffer |
autobuffer boolean attribute if specified, video will automatically begin buffering even if it's not set to auto play. |
|
controls |
If controls attribute is present, allows the user to control video playback, including volume, seeking, and pause/resume playback. |
|
height |
height attribute specifies the height of the video's display area, in CSS pixels. |
|
loop |
loop boolean attribute if specified, allows video automatically seek back to the start after reaching at the end. |
|
preload |
preload attribute specifies that the video will be loaded at page load, and ready to run. Ignored if autoplay is present. |
|
poster |
poster is a URL of an image to show until the user plays or seeks. |
|
src |
URL of the video to embed. This is optional and instead of this <source> element can be used within the video block to specify the video to embed |
|
width |
width attribute specifies the width of the video's display area, in CSS pixels. |
Embedding Audio
HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML document as follows.
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.
<Source> tag can be used to specify media along with media type and many other attributes. An audio element allows multiple source elements but browser will use the first recognized format
This will produce following result −
Audio Attribute Specification
HTML5 audio tag can have number of attributes for controlling the look and feel and various functionalities of the control:
|
Attribute |
Description |
|
autoplay |
autoplay boolean attribute if specified, audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data. |
|
autobuffer |
autobuffer boolean attribute if specified, audio will automatically begin buffering even if it is not set to auto play. |
|
controls |
If controls attribute is present, it allows the user to control audio playback, including volume, seeking, and pause/resume playback. |
|
loop |
loop boolean attribute if specified, it allows audio automatically seek back to the start after reaching at the end. |
|
preload |
preload attribute specifies that the audio will be loaded at page load, and ready to run and will be ignored if auto play is present. |
|
src |
The URL of the audio to embed. This is optional and instead of this <source> element can be used within the video block to specify the video to embed |
Handling Media Events
HTML5 audio and video tag can have a number of attributes for controlling various functionalities of the control using Javascript
|
Event |
Description |
|
Abort |
abort event is generated when playback is aborted. |
|
Canplay |
canplay event is generated when enough data is available that the media can be played. |
|
Ended |
ended event is generated when playback completes. |
|
Error |
error event is generated when an error occurs. |
|
Loadeddata |
loadeddata event is generated when the first frame of the media has finished loading. |
|
Loadstart |
loadstart event is generated when loading of the media begins. |
|
pause |
pause event is generated when playback is paused. |
|
play |
play event is generated when playback starts or resumes. |
|
progress |
progress event is generated periodically to inform the progress of the downloading the media. |
|
ratechange |
ratechange event is generated when the playback speed changes. |
|
seeked |
seeked event is generated when a seek operation completes. |
|
seeking |
seeking event is generated when a seek operation begins. |
|
suspend |
suspend event is generated when loading of the media is suspended. |
|
volumechange |
volumechange event is generated when the audio volume changes. |
|
waiting |
waiting event is generated when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek). |
Below is the example which allows to play the given video
Configuring Servers for Media Type
Most servers by default don't serve Ogg or mp4 media with the correct MIME types, appropriate configuration has to be added for this.
