AirPlay video support in iOS Safari — a bookmarklet
Published · tagged with HTML, iOS, JavaScript
As you may have heard, the upcoming iOS 4.3 will support AirPlay video streaming in Mobile Safari. Previously video streaming was only available in Apple-controlled iOS applications like the YouTube and iPod/Video apps, but the new iOS 4.3 beta opens up AirPlay support to both third party App Store applications, as well as embedded web videos using either the Quicktime plugin (<embed>) or the <video> element. (Note that AirPlay streaming for <audio> is already available in the current iOS release.)
This is great news. However, if the iOS 4.3 beta is any indication, this new feature is disabled by default (presumably because it’s still in bèta), so to enable it, websites need to add a proprietary x-webkit-airplay attribute with a value of allow to any opening <video> tags.
<video x-webkit-airplay="allow">
<source src="foo.mp4" type="video/mp4">
<!-- other sources and fallbacks go here -->
</video>
If you’re still using <embed>, you can just use airplay="allow":
<embed src="foo.mov" airplay="allow"></embed>
It should be possible (I haven’t been able to test this) to unlock this feature on sites that don’t explicitly set these new attributes yet, by using a little bit of JavaScript:
[].forEach.call(document.querySelectorAll('embed, video'), function(el) {
el.setAttribute('x-webkit-airplay', 'allow');
el.setAttribute('airplay', 'allow')
});
Here’s the same snippet as a bookmarklet:
javascript:[].forEach.call(document.querySelectorAll('embed,video'),function(e){e.setAttribute('x-webkit-airplay','allow');e.setAttribute('airplay','allow')});
You can just copy and paste that and add it as a bookmark on your iOS device.
Credit to Ben Ward, who tweeted a slightly broken bookmarklet with the same intention.
Update: Now that iOS 4.3 final has been released, it would be cool if someone with an Apple TV could step up and test this. :)
Update: Alex Gibson was kind enough to see if this snippet actually works. Turns out iOS 4.3 will stream the audio from the <video> by default — no attribute magic required — although it does need x-webkit-airplay="allow" to stream the video as well.

Interestingly, the above bookmarklet doesn’t work, even though the attributes are added to the elements correctly. The only way of getting this to work is by cloning the <video> element after adding the attribute and then re-inserting the copy into the DOM.
Update: As of the first iOS 5 beta, AirPlay is enabled by default for video content in both applications and websites. Yay!
Leave a comment
Comment on “AirPlay video support in iOS Safari — a bookmarklet”Name *
Email *
Website
Your input will be parsed as Markdown.
Spammer? (Enter ‘no’) *























