HTML5 Audio and Video

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

Back to Tutorial