James Clarke & Notes

Bookmarklet to enable AirPlay on all web videos

Apple, in iOS 4.3, introduced the ability to stream embedded web videos over AirPlay. Mac OS Rumors has a good overview of the feature. The main limitation is that websites must explicitly opt-in to enable AirPlay. Luckily, Ben Ward and Mathias Bynens posted a really nice bookmarklet to enable AirPlay for all videos on iOS devices.

The bookmarklet works by modifying video and embed elements to contain the attributes x-webkit-airplay="allow" and airplay=allow. These attributes inform the iOS movie player to enable AirPlay (MPMoviePlayerController‘s allowsAirPlay attribute is set to true). This should allow any embedded web video to play over AirPlay. However, it turns out modifying the attributes after loading the page does not cause the movie player to enable AirPlay.

Experimenting and modifying the bookmarklet I found how to enable AirPlay for all videos. AirPlay is enabled If we load a new page with the modified video and embed elements from the original. My assumption is movie player initializes the video elements when the page loads rather than inspecting the element on tapping (or clicking) thus AirPlay is disabled. The new bookmarklet is below and has been tested on HTML5Video, Akamai iPhone Showcase, and Veetle.

This link contains the bookmarklet. Copy the link and place it in a new bookmark in Mobile Safari. When you visit a web page with embedded video, load the bookmark and a new window will open with the same content but AirPlay will be enabled.

Or in human readable form:

javascript:[].slice.call(
  document.querySelectorAll('embed,video'),0).map(
    function(e) {
      e.setAttribute('x-webkit-airplay','allow');
      e.setAttribute('airplay','allow')
    });
var w = window.open('about:blank');
var d = w.document;
d.open();
d.write(document.documentElement.innerHTML);
d.close();

There is probably a nicer way to do this but I am not that familiar with DOM in JavaScript. Get in touch if you know of a cleaner method.