Though the iOS 4.3 beta news is still making the rounds on tech websites, we thought we’d go ahead and setup a simple demo of the new AirPlay support in Mobile Safari.
(Note: if you don’t have iOS 4.3 installed on both your mobile device and your Apple TV 2, you probably won’t be able to test the new feature with the video below, however you can still read along about how it works)
Previously AirPlay video streaming was only available in Apple-controlled iOS applications like the Youtube and iPod/Video Apps, however the new iOS 4.3 beta opens up AirPlay support to both 3rd party App Store applications, as well as embedded web videos using either the Quicktime plugin or the HTML5
Supported formats are listed by Apple as follows:
- H.264 video with AAC audio
- HTTP streaming, both live and on demand
- progressive download content
- local content
Those last 2 probably don’t apply to Mobile Safari, but who knows…. maybe one day we’ll see offline HTML5 applications downloading and storing video for later use.
In any case, despite having support for AirPlay directly in Mobile Safari, web sites must explicitly turn it on for each video since it is off by default. A special option in both the Quicktime plugin element, and the HTML5
<video> tag controls whether or not AirPlay will be allowed:
<embed src="sample.mov" width="160" height="144" airplay="allow"></embed>
<video src="sample.mov" width="160" height="144" x-webkit-airplay="allow"></video>
This of course means that a lot of the bigger websites may simply never opt-in to AirPlay streaming, however it’s quite likely that jailbreakers will be able to turn on AirPlay even for sites that specifically disable it.
But some larger websites probably will turn on AirPlay support, especially the ones that aren’t paranoid about controlling where their content can be viewed.
For a demonstration of how it works, I chose the Creative Commons licensed “Big Buck Bunny” trailer. The video is encoded with h.264, and embedded here with the HTML5
Here’s the code from the above video, notice that it’s just a standard HTML5
<video> element, except the airplay attribute is set to “allow”:
<video controls=”true” width="480" height="300" x-webkit-airplay="allow" src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v">If you can't see this, your browser probably doesn't support the HTML5 video tag.</video>
If you visit this page in a desktop browser, you’ll just see the video in place. But if you visit using iOS 4.3, and have a similarly upgraded Apple TV 2 on your network, you’ll see something familiar when you tap the video rectangle to bring up the video player:
And if you then tap the AirPlay icon and select AppleTV, you’ll see this:
This isn’t extraordinary if you’ve ever used AirPlay before, except for the fact that this video isn’t playing from the Youtube or iPod/Video Apps, or any local App for that matter, it’s streaming from the web, through Mobile Safari, over the wireless network to the Apple TV 2.
If websites decide to start supporting AirPlay, and that’s a big ‘if’ since most of them are still using Flash anyway, it will be quite a useful feature.
What do you think? Let us know in the comments or on Twitter!