Apple Doctors "Magical" HTML5 Video Demo - Safari and Quicktime Are Not Web Standards

Apple Doctors Magical HTML5 Video Demo   Safari and Quicktime Are Not Web Standards

To call HTML5 Video a hype would be an understatement. Every week, major tech companies announce improved support or new breakthroughs. Literally hundreds of new blogposts a day pop up on Google's blog search. In this debate, no company is as vocal as Apple.

Apple Doctors Magical HTML5 Video Demo   Safari and Quicktime Are Not Web StandardsThe 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, while exciting, is misleading and potentially detrimental to the landscape of web development and browser compatibilities. The demo is definitely 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"
  poster="... /images/tron_legacy.jpg"
  loop="loop" autoplay="autoplay" autobuffer="autobuffer">
  <img src="... /images/tron_legacy.jpg">

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

Undoubtedly, no one has done as much for HTML5 Video as Apple has to date.  However, we must be sure to not overlook the progress Flash made when they 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 plugin 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.

About our Guest Expert - Jeroen "JW" Wijering and Zachary Ozer

Apple Doctors Magical HTML5 Video Demo   Safari and Quicktime Are Not Web StandardsJeroen is a pioneer when it comes to online video, Period. He is the Chief Digital Architect at LongTailVideo and is the creator of the incredibly successful JW Player, which has generated several million downloads since their launch in 2005. In addition, Jeroen has developed several other projects including, an online magazine for entrepreneurs and professionals as well as an online video hosting platform/service called Bits on the Run.

Zachary Ozer is a Developer at LongTail Video and co-authored this post with Jeroen.

Don't Miss Out - Join Our VIP Video Marketing Community!
Get daily online video tips and trends via email!

About the Author -

Please Note: Opinions expressed in this article are those of the contributing author and not necessarily that of

What do you think? ▼
  • Alex Paris

    You should know that I'm offended (as a mac user and as a designer). I just published a web page that uses apple's method of masking video without http streaming and works in webkit (chrome and safari) ie 9 and gecko. if you're going to accuse someone of "doctoring" something then at least do your homework and check it out for yourself.
    Flash may have been at the forefront of web video but they are being left behind by the flexabilty of open standards like.h264 and webm. Now Adobe is playing catchup to support them. Be honest, if you're an evangelist for flash then say so, but don't hide behind that to take a stab at apple and HTML5's implementation.

  • Grumpys view

    Great article.
    Could the source be the stream of someones webcam? ( streaming)

    Thank in advance

  • stellablue

    Good article, I was looking for info on HTML5 video tag and how resolution and bit-rate switching was addressed. I use JW player and support longtail and can typically encode 2 or 3 videos to satisfy different bandwidths / screen sizes. I don't see how tag know which source video to use based on bandwidth / screen size (as the article states).

    I am for anything that makes insertion easy, not with javascript, object tags, embed tags that are a total pain. swfObject is awesome, but one still should provide object/embed tags anyway. Now I am also needing Quicktime statements (QT_WriteOBJECT, object, embed) to support mobile devices like iPhone/iPad that don't support flash. So, would it be wise to code using tag as 1st element and then put swfObject (and/or object/embed) code as tag alternate content?

    again, good reading and thanks for any input to my comments - stellablue

  • Barry

    New standards are presented all the time. You seem to ignore the fact that Google is a huge proponent in development and use of HTML 5. Flash is old, slow, fat and wrinkled. Who wants Flash other than vested Flash developers and Adobe? LongTail seems to disagree too. Version 5.2 supports HTML 5. Mark - keep an open mind, there may be something good about change.

    • Mark Robertson

      HUH??? Im not sure I understand where you are coming from. Ive been talking about HTML5 for almost 2 years now and am completely on board with it. Id even say I've evangelized about it... Ive also covered the JW HTML5 player. This post is 100% about Apple's irresponsible push for Apple's products, disguised as support for HTML5. Im completely confused by your comment and a little insulted to be honest.

      • Mark Robertson

        BTW - did you read the post? This was written by Longtail, not me.... Im so perplexed.. oh well

        • Jeremy Scott

          I don't care who wrote it... it's an excellent post.

  • Jeremy Scott

    This article is absolutely fantastic. Great stuff.