HTML5 Audio and Video

Certify and Increase Opportunity.
Be
Govt. Certified HTML5 Developer

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!!

Get industry recognized certification – Contact us

Menu