Note to Apple: Safari & QuickTime are Not Web Standards
[This article originally ran on the LongTail Support Community Blog—Ed.]
To call HTML5 Video "hype" would be an understatement. Every week, major tech companies announce improved support or new breakthroughs. Literally hundreds of new blog posts pop up every day on Google's blog search. In this debate, no company is as vocal as Apple.
The company's latest move is the release of an HTML5 showcase that includes a video demo featuring "the capabilities of web standards such as HTML5, CSS3, and JavaScript." This effort is both laudable and shameful. The demo definitely is inspiring and helps to move HTML5 Video along at a fast clip. At the same time though, none of the cool gizmos on this page are actually web standards. Instead, they are specific functionalities found in Apple's Safari/QuickTime product stack (which is why access is restricted to Safari). A breakdown:
The Video
Although the video codec debate has heated up with Google's release of WebM, Apple firmly stands by H.264. The demo offers no Ogg or WebM version of the video, just an image fallback:
<video id="videoShowcase" width="848" height="352"
src=".../demos/apple-html5-demo-tron_legacy-us-20100601_r848-2cie.mov"
poster="... /images/tron_legacy.jpg"
loop="loop" autoplay="autoplay" autobuffer="autobuffer">
<img src="... /images/tron_legacy.jpg">
</video>
The loaded video is actually not an MP4 but a MOV. MOV, 99% similar to MP4, is the container format of Apple's QuickTime technology. This video only works on Safari, and in order to play this video in Safari on Windows, a user must have the QuickTime plugin installed. No other browser is able to play the video.
A more standards-based approach would be to use an MP4 video instead of a MOV one, while simultaneously also offering an Ogg video. That will work on all HTML5 browsers.
The Controls
The scale, mask, and perspective video controls are very slick, but unfortunately still browser-specific features. Here's how the CSS of the video looks with these options enabled:
-webkit-mask-image: url(... /images/tron_mask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
-webkit-transform: matrix3d(0.64,0,0.64,0,0,0.83,0,0,-0.53,0,0.76,0,0,0,0,1);
-webkit-transform-style: preserve-3d;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
This chunk of CSS3 will only render on WebKit-based browsers: Safari and Chrome. Firefox and Opera will not recognize these proprietary style rules.
A more standards-based approach would be to use mask, transform, and transition CSS rules using both -webkit-, -moz- and -o- prefixes. Apple could be frank about the draft status of these functionalities and the current differences in browser implementations.
The Description
The description below the video mostly talks about Safari's proprietary HTTP streaming technology:
The HTML5 video tag allows you to integrate video within your website's code.
And Safari offers HTTP streaming, so playback quality dynamically adjusts to
the available speed of wired or wireless networks - perfect for viewing on
mobile devices such as iPad, iPhone, and iPod Touch.
Unfortunately, HTTP Live Streaming only works on the iPad, iPhone, iPod Touch, and Mac OSX 10.6 (with Quicktime X). Additionally, the technology requires one to encode videos into an obscure format: hundreds of small MPEG-TS fragments, glued together using M3U8 playlists. These video files are completely useless for any other browser or media player.
A more standards-based approach would be to explain that seeking to non-downloaded parts of the video (like YouTube) is possible. This functionality, using HTTP Range requests, is supported by all HTML5 browsers. HTML5 video at large has no capabilities in the area of bandwidth detection and on-the-fly bitrate switching.
HTML5 is About Standards
What Apple seems to have forgotten is that Flash solved a big problem when it started supporting video a couple of years ago. Suddenly it was possible to easily display videos on a page, regardless of browser or operating system. Only one chunk of code and only one video file were needed; plugin daisychains and forced installations were a thing of the past. Due to its ubiquity, Flash effectively enabled the online video surge of the last few years.
Similarly, the big promise of HTML5 Video is of it being a widely adopted and highly standardized technology. While Apple may see it as a means to reach feature parity with Flash, most web developers see it as a simple solution for including video in a webpage without worrying about plug-in support. Web standards are about removing incompatibility barriers altogether. They are not about replacing plugins with proprietary browser addons, which is exactly what Apple has done here.
It would be awesome for Apple to start advocating the use of cross-browser HTML5 Video, being honest about what the technology can and cannot do today. Alternatively, it would be great for Apple to tell developers what its demo actually is: an excellent showcase of the video capabilities of its Safari/QuickTime product stack. Regardless, Apple should stop labelling vendor-specific implementations as web standards. It confuses web developers and it will lead to a new era of browser incompatibility that will slow down the overall adoption of HTML5—and the conveniences it brings to web developers around the world.
Related Articles
Apple's built-in video player gains the ability to merge multiple clips and export an audio file.
22 Jul 2011