First Look: How Mobile Safari supports AirPlay video streming

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 <video> element.

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:

  • Quicktime: <embed src="sample.mov" width="160" height="144" airplay="allow"></embed>
  • HTML5: <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 <video> tag:



Video credit: Blender Foundation | www.blender.org



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:

Big Buck Bunny playing in the Video widget

Big Buck Bunny playing in the Video widget

And if you then tap the AirPlay icon and select AppleTV, you’ll see this:

Big Buck Bunny playing via AirPlay to Apple TV 2

Big Buck Bunny playing via AirPlay to Apple TV 2

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!


Share this post: Share this article on Facebook Share this Article on Twitter Add this Article to Stumbleupon Add this Article to Del.icio.us Add this Article to Digg Add this Article to Reddit Add this Article to Newsvine
This entry was posted in Apple Software, Articles and tagged , , , , , , , . Bookmark the permalink. Trackbacks are closed, but you can post a comment.
  • AirForAll

    Here’s a Bookmarklet for MobileSafari to enable just that on any Playable Video.

    http://pastie.org/pastes/1454688

    Enjoy!

  • Niklas

    My iPad is updated (4.3) but my ATV2 is NOT updated. The video still plays fine on my ATV2

  • Louie

    I’m hoping that you can stream safari to AppleTV from say an iPad and the iPad turns into a navigation device with book marks and such in a side bar.

  • Ben Dodson

    This is all well and good, but what about viewing HTML 5 video on the web that the website owners haven’t updated? I wrote a Javascript bookmarklet to take care of that very problem which you can get at http://bendodson.com/weblog/2011/01/13/enabling-any-html5-video-to-work-over-airplay-e-g-vimeo/ – it works with the majority of online video include sites like vimeo.com

  • bvondeylen

    How about something like Google Docs Presentations? Would that play via Airplay on an AppleTV?

  • http://mathiasbynens.be/ Mathias Bynens

    Here’s a bookmarklet to enable AirPlay on web sites that aren’t using these new attributes in their HTML: http://mathiasbynens.be/notes/ios-airplay-bookmarklet

  • Guest

    This would be great for people who view videos from veetle . com deom their iphone!