Nowadays to play video or music on a website, the end users need to have a third party plug-in installed on their computer such as Flash or Silverlight for instance.
Below is an example of the code you get from YouTube when you want to include video in a web site:
Below are some of the concerns that arise with this solution:
HTML5 comes with the native integration of video and audio in the browser using the
Before explaining how to use these new elements, let me first explain very briefly what are video containers and codecs.
You might have heard about AVI or MP4 file but these are really container formats. Such video container formats store a video track, one or more audio track, informations to synchronize the video and other information like the language of an audio track for instance.
The word codec comes from the contraction of compressor-decompressor. It is an algorithm specifying how a video/audio is encoded. Your player decode a video/audio stream when playing a video file. Depending on the codec used, a video or an audio track can have different quality and size.
Specifications do not make recommendations about the codecs to use, this is the choice of the market browsers to decide which codecs they want to support.
There are three major video containers to use right now with HTML5:
The current support of these containers and formats on current browsers is the following: Chrome supports all the containers, Firefox (Ogg), IE does not support any of these for the moment but that does not mean you cannot use HTML
In addition to the diversity of codecs, some of them have different profiles (depending on the CPU and the bandwidth of a targeted device). Some devices only supports some profiles for a same codec.
To enable support on most browsers, you are most likely going to encode your video several times.
Of course, this is just a quick introduction to containers and codecs. This is more complex than that. If you want more details I really recommend you to read the book "HTML5 Up and running" by Mark Pilgrim, especially the chapter "Video on the web".
So, how to use the video element? Below is a quick and simple example to include a simple video file:
But of course since we want to support various browsers to read our video, we need to provide different video sources and each browser will pick the source it can play.
You can also provide a fallback to whatever you want: From displaying an image instead of the video to providing a Flash video (yes Flash is not dead and will not be for long time, but that is another subject ;) )
Below is an example on how to do that:
The <video> element has some interesting attributes. Below are some of them:
The concept to play an audio file using the
HTML5 also provide the audio and video API to manipulate our elements in JavaScript. There are functions like
Combining these elements and these attributes allows developers to have their own styled player.
Below is an example of the code you get from YouTube when you want to include video in a web site:
Code:
<object width="640" height="385">
<param name="movie" value="https://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="https://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 with this solution:
- This is not semantic. How can a browser tell the
<object>element is for video, maybe audio, a game, etc? - This is repetitive: Some browsers do not support the
<object>element so you need to repeat all the params within a<embed>element - Other concerns comes with the usage of plugins
- An end user might not have the plug-in installed on his/her browser and he/she might not have the right to install it
- Plug-ins are not standards and they are not cross platforms (Flash is not supported on iPod, iPhone, iPad and Silverlight is not supported on Linux
- There are drawing issues with the usage of RIA plug-ins. A plug-in 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.
HTML5 comes with the native integration of video and audio in the browser using the
<video> and the <audio> elements.Before explaining how to use these new elements, let me first explain very briefly what are video containers and codecs.
You might have heard about AVI or MP4 file but these are really container formats. Such video container formats store a video track, one or more audio track, informations to synchronize the video and other information like the language of an audio track for instance.
The word codec comes from the contraction of compressor-decompressor. It is an algorithm specifying how a video/audio is encoded. Your player decode a video/audio stream when playing a video file. Depending on the codec used, a video or an audio track can have different quality and size.
Specifications do not make recommendations about the codecs to use, this is the choice of the market browsers to decide which codecs they want to support.
There are three major video containers to use right now with HTML5:
- Ogg container: Theora is the video codec and Vorbis is the audio codec
- MP4 container: H.264 is the video codec and AAC is the audio codec
- WebM container: VP8 is the video codec and Vorbis is the audio codec
The current support of these containers and formats on current browsers is the following: Chrome supports all the containers, Firefox (Ogg), IE does not support any of these for the moment but that does not mean you cannot use HTML
<video> and <audio> elements (I will show you why later in this tutorial), Opera (Ogg and WebM) and Safari (MP4)In addition to the diversity of codecs, some of them have different profiles (depending on the CPU and the bandwidth of a targeted device). Some devices only supports some profiles for a same codec.
To enable support on most browsers, you are most likely going to encode your video several times.
Of course, this is just a quick introduction to containers and codecs. This is more complex than that. If you want more details I really recommend you to read the book "HTML5 Up and running" by Mark Pilgrim, especially the chapter "Video on the web".
So, how to use the video element? Below is a quick and simple example to include a simple video file:
Code:
<video src="myvideo.webm"></video>
But of course since we want to support various browsers to read our video, we need to provide different video sources and each browser will pick the source it can play.
You can also provide a fallback to whatever you want: From displaying an image instead of the video to providing a Flash video (yes Flash is not dead and will not be for long time, but that is another subject ;) )
Below is an example on how to do that:
Code:
<video>
<!-- Firefox -->
<source src="myvideo.ogv" type="video/ogg" />
<!-- Safari/Chrome -->
<source src="myvideo.mp4" type="video/mp4" />
<!-- Fallback to other solution comes after all sources -->
Your browser does not support the video provided. You can either download the<a href="myvideo.ogv">Ogv version</a>
or the <a href="myvideo.mp4">MP4 version</a>
</video>
The <video> element has some interesting attributes. Below are some of them:
- autoplay: Does the browser start to play the video automatically? Can be true or false.
- controls: Does the browser display the controls (play/pause/volume/etc) on the video? Can be true or false.
- height: Height size of the video to be played.
- loop: Is the video played in loop? Can be true or false.
- muted: Is the volume muted? Can be true or false.
- playbackRate: Is the speed of the video. Numeric value (double).
- poster: Path of an image to be displayed before the video is played.
- src: Path of the video file. As we have just seen you can also use the
<source>element within a<video>element - width: Width size of the video to be played.
The concept to play an audio file using the
<audio> element is the same. The principle of fallback also apply:
Code:
<audio controls>
<source src="mymusic.ogg">
<source src="mymusic.mp3">
<!-- Fallback comes here -->
You can download my music in <a href="mymusic.ogg">ogg version</a> or in <a href="mymusic.mp3">mp3 version</a>
</audio>
HTML5 also provide the audio and video API to manipulate our elements in JavaScript. There are functions like
play(), pause() or canPlayType() and you can register to different event listeners for instance:
Code:
video.addEventListener('playing', function(e){
//Do something when the video is playing
},true);
Combining these elements and these attributes allows developers to have their own styled player.