Since Tim Berners-Lee first published it in 1991, HTML has been the one and only way that clients and servers on the Web could communicate. Initially just handling text was sufficient, but over time Web pages became more complex and required new functions. Among the changes implemented were the tags that allow scripting languages to create dynamic pages, reduce interactions between clients and servers, and provide the kind of media-heavy websites that have become all-but ubiquitous.
As the Web’s functionality increased, the use of audio and video has increased exponentially. Since there was no provision in HTML to directly support these features, browser plug-ins became the means by which they were provided. By far the most common plug-in is Adobe Flash. Indeed, entire websites have been developed using Flash’s different capabilities. So what’s wrong with Flash?
- It’s a browser plug-in. These often expose systems to hacker intrusions because, being complex software, they contain vulnerabilities.
- Although these vulnerabilities are religiously updated by Adobe, people are lax about applying the fixes. Known holes then become favorite attack points.
- It’s a closed proprietary system, while HTML and JavaScript are open. Given this, it can’t become an official part of W3C Web standards.
- It doesn’t support touch, which is becoming a standard interface approach on mobile and many additional types of devices.
It’s the mission of W3C to supports open Web standards. Therefore, Flash (and other vendor-provided functions like iTunes, Java Applets and Quick Time) can’t become standards themselves. So, the W3C created a standard that DID NOT SUPPORT PLUG-INS, a holy grail of mark-up languages that would free us from the plug-in house of cards forever. Yes, I’m talking about HTML5. HTML5 provides a raft of new features, but for now we’ll focus on its audio and video tags.
Multimedia for Everyone
Once it was decided to include the appropriate support for audio and video tags within HTML5, the question became, how would they work? Let’s look first at video. There are a plethora of video-streaming implementations around, each one favored by a particular set of people and companies. It's apparent that there was no obvious candidate that everyone favored. Among the biggest challenges was that of public domain. Which of these video formats could be guaranteed to be royalty-free? The answer was: none. They all came with strings attached. Let’s focus on the facts. The three major candidates to be supported by HTML5 video are H.264 (.mp4 files), VP8 (.webm files) and Theora (.ogg files). When you look at which of these are supported by the most popular browsers, you find a disheartening mess.
To address this, HTML5’s audio and video tags allow the specification of multiple sources so each browser can pick the option that it supports.
Audio
Let’s first create code that allows audio to be played on any browser that supports HTML5. Although all the testing was done on Windows 7 and Windows 8 for IE 10, the tests are valid for any operating system that runs the specified browsers. The <audio> tag, along with the required sources, was tested with the following HTML code. The browser selects the type of audio it supports, but doesn’t abandon users with older browsers. For them, the Flash plays. This is a developer choice.. We tested this code on Windows 7 with IE9, IE10, Firefox 19.0, Chrome 25.0.1364.172, Safari 5.1.7, Opera 12.14 and Windows 8 with IE10, both in the desktop and Windows Store app interfaces.
<!DOCTYPE html> <html> <audio controls> <!--tag for audio--> <source src="/files/The Sample Audio.mp3" type="audio/mpeg"/> <source src="/files/The Sample Audio.ogg" type="audio/ogg"/> <!-- Flash fallback --> <embed type="application/x-shockwave-flash" flashvars="audioUrl=http://sample.com/files/The Sample Audio.mp3" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="350" height="27" quality="best"> </audio> </html> Incidental issues: When this code was first run on the Windows 7 IE9/10 and Windows 8 desktop the Flash fallback ran. It was determined that this occurred because the compatibility mode button had been clicked, thus putting the browser in a non-HTML5 mode.
Video
Now we will create the code to display video on all of these same systems and browsers. The <video> tag, along with the required sources, was tested with the following HTML code. The browser selects the type of video and if none is supported, users are presented with an appropriate message. The tag was tested in the same manner as the audio tag. Both and audio and video were also successfully tested on OS/X.
<!DOCTYPE html> <html> <video id="The Sample Video" width="350" height="200" controls> <source src="/files/The Sample Video.mp4" type="video/mp4"> <source src="/files/The Sample Video.webm" type="video/webm"> <p>Please update your browser.</p> </video> </html> Incidental issues: When run on Safari, the “Please update your browser” message was displayed. It was determined that it was necessary to have QuickTime installed in order for video to play. I would like to note that developing websites that play HTML5 audio and video requires more effort, since you have to prepare all audio and video files in several formats before you test. This requires you to invest in the tools, testing and development overhead necessary to make this happen. Still, it’s worth the effort first, because it both frees you from depending on any plug-ins and second, allows your website to work with the Windows 8 IE10 in the Windows Store app interface. We will address the details of this in another blog post.
