HTML5
|
HTML5 :Making audio and video tags work in major available browsers
I have always loved HTML5 for its amazing features support. No doubt web is not going to remain the same after HTML5. But it is unfortunate that not a single available browser today supports all the features of HTML5. When the HTML5 audio and video tags were first introduced, codec and browser incompatibilities made them difficult to use and unrealistic to deploy on large-scale.
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:
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/ |
|