Html5 Tutorial : Audio And Video
- Nowadays, to play audio or video on a website, we have to rely on third party plugins such as Silverlight or Flash.
An example of that is the following:
<object width="640" height="385"> <param name="movie" value="http://www.youtube.com/v/EdDc7sWjCL4?fs=1&hl=en_US"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/EdDc7sWjCL4?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"> </embed> </object>Below are some of the concerns that arise:
-
This solution is not semantic at all. How can a browser tell that the
<object>element is for video, audio, or even gaming? -
Most of the information here is redundant since some browsers do not support the
<object>element - An end-user might not have the plugin installed on his/her browser and he/she might not have the right to install it
- Plugins are not standards and they are not cross platforms (Flash is not supported on iOS and Silverlight is not supported on Linux)
- There are drawing issues with the usage of RIA plugins. A plugin sits in the front of a web page. For instance, if you have a drop down menu that overlaps the plug-in drawing area, the menu will appear behind the drawing area of the plug-in. This is not convenient and not user friendly at all.
-
This solution is not semantic at all. How can a browser tell that the
-
HTML5 specification comes with the native integration of video and audio in the browser using the
<video>and<audio>elements. - Before explaining the API for these new tags, we first need to discuss about container formats and codecs.
A container format, such as AVI, MP4 or Ogg for instance, is a file that describes how data and metadata are stored. You can think of it as ZIP or RAR files.
- A video container format has a video track along with one or more audio tracks. These files can also have metadata (think of ID3 tags for MP3).
- The container file, as we said, can also contain metadata such as the cover art for instance.
- A codec stands for compressor/decompressor, it is an algorithm by which a video or audio track is encoded and decoded.
When playing a container file (AVI for instance), your player knows how to read the container format and then finds out which video and audio tracks to play. To play those tracks, your player use several codecs.
- One to decode the video stream so you can see video frames on the screen.
- Another one to decode the audio stream so you can hear the audio track.
![[Note]](../images/note.png)
Note There are two types of codecs: Lossy codecs and lossless codecs. Lossy codecs prefer compression over quality. Lossless codecs prefer quality over compression. Lossy codecs are the one used for the web.
Note Since it exists a lot of different devices (with low/high CPU, low/high bandwidth, low/high RAM), some codecs have different profiles to target this range of devices.
The three major video containers for HTML5 videos along with their video/audio codecs are the following:
- WebM (.mkv): VP8 video and Vorbis audio streams.
- OGG (.ogv): Theora video and Vorbis audio streams.
- MP4 (.mp4): H.264 video and AAC audio streams.
Below is the table showing the current browser support for these formats:
Chrome 8.0
Firefox 3.6
Opera 10.6
Safari 5.0
- WebM: VP8/Vorbis
- MP4: H.264/AAC
- OGG: Theora/Vorbis
- OGG: Theora/Vorbis
- WebM: VP8/Vorbis
- OGG: Theora/Vorbis
- MP4: H.264/AAC
Note Firefox 4 now supports WebM!
Note On January 11, 2011, Google announced they are going to drop support for the H.264 video codec in future versions of Google Chrome.
Below is a quick and dirty example of how to include a video in your web page:
<!DOCTYPE HTML> <html> <head> ... </head> <body> <video src="clip.mp4"> </video> </body> </html>Note As we have previously discussed, you cannot find one single codec that is supported in all major browsers. But hopefully, we have the ability to provide multiple source for a single
<video>/<audio>element using the nested tag:<source>How to provide multiple sources for our
<audio>/<video>element using the<source>element:<!DOCTYPE HTML> <html> <head> ... </head> <body> <video> <source src='clip.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
<source src='clip.ogg' type='video/ogg; codecs="theora, vorbis"'/> 
<p>Your browser does not support HTML5 video features.</p>
<p>However, you can download the video either in the <a href="clip.ogg">OGG</a> or in the <a href="clip.mp4">MP4</a> format.</p>
</video>
</body>
</html> We provided the video in two different format (mp4 and ogg). The browser then download the first source it can support but if the browser cannot support any provided source or just does not support the <video>element, it will display the fallback section. When thetypeattribute is present, the browser will use this to check if it can play a video file instead of loading each video and try to play them This is the fallback section. This could be anything we want: flash version of the video, download link for the video, etc…
<audio>and<video>have some common attributes that can be set. These are following:-
autoplay: Does the browser start to play the media automatically? Can betrueorfalse. -
controls: Does the browser display the controls (play/pause/volume/etc) on the media? Can betrueorfalse. -
loop: Is the media played in loop? Can betrueorfalse. -
muted: Is the volume muted? Can betrueorfalse. -
playbackRate: Is the speed of the media. Numeric value (double). -
src: Path of the media file. As we have just seen, you can also use the<source>element within a<video>or<audio>element to provide multiple sources.
-
More specifically for
<video>:-
poster: Path of an image to be displayed before the<video>is played. -
height: Height size of the<video>to be played. -
width: Width size of the<video>to be played.
-
Both
<video>and<audio>elements have the following functions:-
play(): To play the media -
pause(): To pause the media -
canPlayType(): To check if your browser can play a certain media resource type
-
There are some media events you might want to listen and the following are some of them:
-
play: fired when the media is played -
pause: fired when the media is paused -
timeupdate: fired when the current playback position has changed -
volumechange: fired when the volume of the media has changed -
ratechange: fired when the playback rate of the media has changed -
ended: fired when the media has finished playing -
seeking: fired when the end user is seeking in the media -
seeked: fired when theseekingattribute has changed to false
-
- Cite 3 drawbacks of using third party plugins (Flash, Silverlight, etc…):
Which of the following is efficient in terms of bandwidth (regardless of the browser)?
<video> <source src='clip.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/> <source src='clip.ogg' type='video/ogg; codecs="theora, vorbis"'/> </video>
Or
<video> <source src='clip.mp4'/> <source src='clip.ogg'/> </video>
- What would you write to have a video element with controls visible to the user which starts to play when the page is loaded?
