Audio & Video
- HTML5 provides the native audio and video support without Flash.
- The <audio> and <video> tags help in adding media to the website.
- The src attribute is used to identify the media source and includes a control attribute so that the user can play and pause the media.
Embedding Video
Simplest form of embedding a video file is as follows:<video src =“selfie.mp4” width=“400” height=“300” controls>
Browser does not support <video> element.
</video>
HTML5 does not specify which video formats should the browsers support in video tag.
The common video tags are:
1. Ogg – These files are used with Thedora video codec and Vorbis audio codec.
2. mpeg4 – These files are used with H.264 video codec and AAC audio codec.
A <source> tag is used to specify media along with the media type and many other attributes. Video element will allow multiple source elements and browser will generally use the first recognized format -
<!DOCTYPE HTML>
<html>
<body>
<video width="400" height="300" controls autoplay>
<source src="/html5/love.ogg" type="video/ogg" />
<source src="/html5/love.mp4" type="video/mp4" />
</video>
</body>
</html>
Output:
Video Attributes
The video tag has a attributes which help in controlling the look, feel and functionalities of the controls:| Attribute | Description |
|---|---|
| autoplay | If this boolean attribute is specified the video automatically begins to play back as soon as it can do so without stopping to finish loading the data. |
| autobuffer | If this boolean attribute is specified the video automatically begins buffering even if it is not set for playing automatically. |
| controls | When this attribute is present, it allows the user to control video playback including the volume, seeking and pause/resume playback. |
| height | It specifies the height of the video's display area in CSS pixel. |
| loop | If this boolean attribute is specified, it allows the video to be sought back to the start after reaching the end. |
| preload | It specifies that the video is loaded at page load and is ready to run. It can be ignored if the autoplay is present. |
| poster | It is a URL of an image which is shown until the user plays or seeks it. |
| src | It is the URL of the video used to embed. It is optional and can be used instead of using the <source> element within the video block to specify the video to embed. |
| width | It specifies the width of the video's display area in CSS pixel. |
Embedding Audio
The <audio> tag is used for embedding sound content in an HTML or XHTML document.<audio src=“selfie.wav” controls autoplay>
Browser does not support the <audio> tag.
</audio>
The most common audio formats are ogg, mp3 and wav.
A <source> tag is used to specify media along with the media type and many other attributes. Audio element allows multiple source elements and browser generally uses the first recognized format -
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src="/html5/selfie.ogg" type="audio/ogg" />
<source src="/html5/selfie.wav" type="audio/wav" />
</audio>
</body>
</html>
Output:
Audio Attributes
The video tag has a attributes which help in controlling the look, feel and functionalities of the controls as follows:| Attributes | Description |
|---|---|
| autoplay | It is a boolean attribute which when specified the audio begins to play back automatically as soon as it can do so without stopping to finish loading the data. |
| autobuffer | It is a boolean attribute which is specified when the audio automatically begins buffering even if its not set to play automatically. |
| controls | When this attribute is present it allows the user to control the audio playback including the volume, seeking and pause/resume playback. |
| loop | If this boolean attribute is specified it will allow the audio to seek back automatically to the start after reaching the end. |
| preload | This attribute specifies the audio that will be loaded at page load and is ready to run. It is ignored if the autoplay is present. |
| src | The URL of the video is embedded. It is optional and can be used instead of using the <source> element within the video block to specify the video to embed. |
Handling the Media Events
The audio and video tag have a number of attributes to control the various functionalities. Some of them are as follows:| Event | Description |
|---|---|
| abort | This event is generated when the playback is aborted. |
| canplay | This event is generated when enough data is available so that the media can be played. |
| error | This event is generated when an error occurs. |
| ended | This event is generated when the playback is completed. |
| loadstart | This event is generated when the media begins loading. |
| loadeddata | This event is generated when the first frame of the media has completed its loading. |
| play | It is generated when the playback starts or resumes. |
| pause | It is generated when the media is paused. |
| progress | It is generated periodically to inform the progress of the downloading media. |
| ratechange | It is generated when the speed of the playback changes. |
| seeking | It is generated when a seek operation begins. |
| seeked | It is generated when the seek operation completes. |
| suspend | It is generated when the loading of media is suspended. |
| volumechange | It is generated when the volume of the audio changes. |
| waiting | It is generated when the requested operation is delayed pending the completion of another operation. |
Example : Demonstrating the playing of the video
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function playingvideo()
{
var v = document.getElementsByTagName("video")[0];
v.play();
}
</script>
</head>
<body>
<form>
<video width="400" height="300" src="/html5/selfie.mp4">
This browser does not support the video element.
</video>
<br />
<input type="button" onclick="playingvideo();" value="Play"/>
</form>
</body>
</html>
Output:
