As an Ai Fender, I live in a world of HTML markup. The next revision of this language is HTML5, though it is currently not fully supported across all browsers. Some of the core ideas behind HTML5 are to create more semantic markup based on usage of modern browsers, and to say farewell to the necessity of proprietary plugins required to access certain types of media on the web - namely audio and video content.
For the first in my series of emerging front-end web technologies, I am going to detail the new <video> tag feature. This may not be the most important new feature of HTML5, but I am certain it will be the most widely-used by the general population of internet users. Video content on the web has evolved immensely over the last five years - YouTube, Hulu, Vimeo, and the list goes on. It would be difficult to find a person who has used the internet and never watched a single video on YouTube.
Currently, users need the Shockwave plugin to view Adobe Flash content, or the Silverlight plugin to view Microsoft Silverlight content. The <video> tag will now allow internet users to view video content without the need to download such third-party plugins to view said content. This could easily boost a site's traffic and page views if more users can access the video content.
Below is a simple example of the <video> tag in action. Unfortunately, it will only be viewable in Mozilla Firefox, Apple Safari, or Google Chrome (more to come on those browsers after the video).
For those not using a browser capable of handling the <video> tag, I have also included screenshots of what the players in each browser look like.
Firefox Video Player
Safari Video Player
Chrome Video Player
Each browser has it's own unique user interface for displaying video content. The player controls all have the basic, fundamental features one would expect: play/pause, scrub through timeline, view time, and ability to control volume. Negative points to Safari for a lack of volume level slider and only giving mute functionality. Though I am sure that all browsers are still fine-tuning their interfaces as this technology is more or less a work-in-progress.
The major drawback to this new method of displaying video content is the formatting of the files used. Safari and Chrome both require their video files to have an H.264 codec or most other Quicktime codecs (Adobe Flash also utilizes the H.264 codec for Flash Video/FLV files), where Firefox requires the OGG Vorbis codec. What this means for developers is the need for multiple video file formats included in the markup, which is actually quite simple and not time-consuming.
The real problem exists with OGG and how difficult it is to find a means to export a video file to that format. It is not impossible, but a plugin is required to use with video conversion software in order to export a video to .ogg format. Ultimately, it is now the task of the developer to install a third-party plugin needed in conjunction to this <video> tag, even though the plugin is not for a browser. But if it aids in creating a better experience for the end user, I am absolutely okay with it.
YouTube has an opt-in experimental version of their video player built using HTML5, but it will only work in browsers that support both HTML5 and H.264 codec. Give it a try: http://www.youtube.com/html5
Labels: html, html5, video
Leave a comment