While using HTML5 for one of my projects, I came across interesting information regarding how to make my HTMl5 audio and video tags work in major browsers available today.
But before going ahead let us know how was a video or an audio embedded in a web page, prior to HTML5 and how is it done using HTML5?
Embedding audio and video prior to HTML5:
Prior to HTML5, we have to rely on third party plugins such as Silverlight or Flash to play an audio or video in on a website. In HTML4, if developers wanted to include video in a web page, they had to make use of the <object> element, which is a generic container for “foreign objects.” The code would have looked something like this:
<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" allowscriptaccess="always"
allowfullscreen="true" width="640" height="385">
</embed>
</object>
How does a browser treats an embedded plugin:
Whenever a developer includes a plugin in his/her page, he/she is actually reserving a certain drawing area that the browser delegates to the plugin. The browser doesn't process or interpret anything happening in the plugin’s area.
Normally, this is not a problem, but issues can arise, since a plugin sits in the front of a web page. For instance, if we 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
Let us look at some more drawback of this using plug-ins:
- The users should have plugin installed in their browser.
- Plugins are not standards and they are not cross platforms (Flash is not supported on iOS and Silverlight is not supported on Linux).
- Plugins can also be a significant cause of browser instability and can create worry in less technical users when they are prompted to download and install newer versions.
- If the dimensions of the plugin’s drawing area are re-sized, this can sometimes have unforeseen effects—a movie playing in the plugin may not re-size, but instead simply be cropped or display extra white spaces.
HTML5 Solution
HTML5 provides a competing, open standard for delivery of multimedia on the Web with its native video and audio elements and APIs. HTML5 specification comes with the native integration of video and audio in the browser using the <video> and <audio> elements. HTML5 video and audio tags were designed to make embedding a video as easy as embedding an image (remember the <img> tag in HTML4). They were also designed to give users a faster experience.
How to embed video using HTML5:
we can embed video into your page using the following code.
<video src="video.mp4" width="320" height="200" controls preload></video>
How to embed audio using HTML5:
we can embed audio into your page using the following code.
<audio src="audio.mp3" controls preload></audio>
Do all browsers support this audio and video tags of HTML5?
Unfortunately, older browsers don't support HTML5 video and audio tags, and even modern browsers don't support a consistent set of video codecs, making embedding a video rather difficult.
Cross browser Solutions for playing Videos using HTML5 video and audio tags:
1.) Using Fallback: In order to ensure that older browsers can view our videos, we should rely on an Adobe Flash fallback. HTML included between, for example, the opening and closing tags of media elements is processed by browsers that don't support HTML5 media. We can take advantage of this fact to provide alternative fallback media for those browsers.To allow visitors with non-HTML5-ready browsers to play the video, we can provide an alternative with Flash embedded that plays the same MP4 we supply for Internet Explorer 9, Safari and Chrome.
<video id="video1" width="640" height="360" >
<source src="video.mp4" >
<source src="video.webm" >
<object width="640" height="360" classid ="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/ shockwave/cabs/flash/swflash.cab#version=8,0,0,0" >
<param name="SRC" value="player.swf?file=video.mp4">
<embed src="player.swf?file=video.mp4" width="640"height="360"></embed>
<p>Please update your browser or install Flash</p>
</object>
</video>
This markup presents all browsers with some way to play back video. For more information on how and why this nested markup works, see Kroc Camen’s “Video for Everybody” (camendesign.com/code/video_for_everybody).
But the drawback with this approach is that we have to encode and store at least two media files.
2.)HTML5 Video and Audio JavaScript Libraries:
There are several libraries and scripts online that can help us in making sure that older browsers can view our videos. Some of the best open source libraries that make HTML5 video and audio easier by integrating all of the relevant code into a single package are
MediaElement.js, jPlayer, VideoJS, Projekktor, Playr and LeanBack.
For example by using MediaElement.js. Instead of offering an HTML5 player to modern browsers and a totally separate Flash player to older browsers, MediaElement.js upgrades them with custom Flash and Silverlight plugins that mimic the HTML5 MediaElement API.
It makes IE6-8 supports <video> and <audio>, Firefox and Opera support h.264, and Safari and IE9 support WebM.
After downloading the latest source code from http://github.com/johndyer/mediaelement/ Add Scripts and Stylesheet as :
<code><script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" /></code>
To support IE6-8, this code must appear in the <head> tag.
Explore this library at http://mediaelementjs.com/