Hello, world!

HTML 5 Audio and Video HTML

HTML tutorial illustrates basic method to embed a video and audio in a web. It also shows the audio and video attribute specification, handling media events and configuring servers for media type.



HTML5 - Audio & Video

The HTML5 provides a way to add multimedia on the Web with its native video and audio elements without using flash.
By applying  the HTML5 <audio> and <video> attribute, inserting media to a website is now easy.
Setting the src attribute is required to indicate the media source and add controls attribute which allow the user to play and stop the media.

Embedding Audio

The HTML5 <audio> tag allows you to embed sound content in an HTML or XHTML document.
The present HTML5 draft specification does not indicate which audio formats browsers should support in the audio tag. However, the usual applied audio formats are ogg, mp3 and wav.

The following is an example of simple audio embedding.
<audio src="audio.wav" controls autoplay>
    Your browser does not support the <audio> element.  
</audio>
The HTML5 <source> tag allows you to indicate media along with the type of media and other attributes.
An audio element supports various source elements and browser will apply the first identified format.

HTML code example embedding audio:

<audio controls autoplay>
   <source src="audio.ogg" type="audio/ogg" />
   <source src="audio.wav" type="audio/wav" />
   Your browser does not support the <audio> element.
</audio>

Audio Attribute Specification

The HTML5 audio tag can hold numerous attributes to control the look and feel and different components of the control:
autoplay - This boolean attribute is applied to let  the video start playing right away as soon as it can perform without pausing to finish loading the data.
autobuffer - This boolean attribute is applied to let  the video start buffering automatically though it is not assigned to play automatically.
controls - This attribute allows the user to manage audio playback, volume, seeking, and pause/resume playback.
loop - This boolean attribute indicates if the audio should be played again once it has finished playing.
preload - This attribute indicates if the audio will be loaded at page load, and all set to run. This is disregarded if set to autoplay.
src - This attribute indicates the URL of the resource to be embedded. Or you may use the <source> element inside the audio block to identify the audio to embed.

Embedding Video

Basic example of embedding a video file in your webpage document:

HTML code example embedding video:

<video src=" video.mp4"  width="300" height="200" controls>
    Your browser does not support the <video> element.  
</video>
Video formats are not identified on which web browsers should support in the video tag in the existing HTML5 draft specification. Typically the video formats applied 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 HTML5 <source> tag allows you to indicate media along with the type of media and other attributes.
A video element supports various source elements and browser will apply the first identified format:

HTML code example embedding video:

<video  width="400" height="300" controls autoplay>
   <source src="video.ogg" type="video/ogg" />
   <source src="video.mp4" type="video/mp4" />
   Your browser does not support the <video> element.
</video>

Video Attribute Specification

autoplay - This boolean attribute is applied to let  the video start playing right away as soon as it can perform without pausing to finish loading the data.
autobuffer - This boolean attribute is applied to let  the video start buffering automatically though it is not assigned to play automatically.
controls - This attribute allows the user to manage video playback, volume, seeking, and pause/resume playback.
height - This attribute indicates the height of the object in CSS pixels
loop - This boolean attribute indicates if the video should be played again once it has finished playing.
preload - This attribute indicates if the video will be loaded at page load, and all set to run. This is disregarded if set to autoplay.
poster - This is a URL or web address of an image to display until the user start playing or seeking.
src - This attribute indicates the URL of the resource to be embedded. Or you may use the <source> element inside the video block to identify the video to embed.
width - This attribute indicates the width of the object in CSS pixels.

Handling Media Events

The HTML5 audio and video attributes by means of Javascript:
abort - This event attribute is activated if playback is aborted.
canplay - This event attribute is activated if enough data is enough that the media can be played.
ended - This event event attribute is activated if playback has ended.
error - This event attribute is activated if an error takes place.
loadeddata - This event attribute is activated if the first frame of the media has done loading.
loadstart - This event attribute is activated if loading of the media starts.
pause - This event attribute is activated if playback is paused.
play - This event attribute is activated if playback begins or resumes.
progress - This event attribute is activated from time to time to update the progress of the downloading media.
ratechange - This event attribute is activated if modification in the playback speed occurs.
seeked - This event attribute is activated if a seek operation has done.
seeking - This event attribute is activated if a seek operation starts.
suspend - This event attribute is activated if loading of the media is suspended.
volumechange - This event attribute is activated if modification in the audio volume occurs.
waiting - This event attribute is activated if the requested operation like ‘playback’ is delayed awaiting the completion of another operation like ‘seek’.

This is an example of how to play the given video:

HTML code example handling media events:

<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function PlayVideo(){
   var v = document.getElementsByTagName("video")[0];
   v.play();
}
</script>
</head>
<html>
<body>
   <form>
   <video  width="400" height="300" src=" https://www.youtube.com/embed/hS5CfP8n_js">
       Your browser does not support the <video> element.
   </video>
   <input type="button" onclick="PlayVideo();"  value="Play"/>
   </form>
</body>
</html>

Configuring Servers for Media Type

You will require inserting the correct configuration for some servers that don't support Ogg or mp4 media with the correct MIME types.
Below are the proper configuration:
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4