It's taken a little while longer than I expected to but I've managed to put together a script to make any HTML 5 video playable through Safari on the iPad. With the advent of iOS 4.3, Apple are now allowing websites to add a special tag to their video markup in order to enable video streaming (as with the current 4.2 version you only get audio streaming). However, with one simple JavaScript bookmarklet, you can now enable AirPlay video for any website.

 First of all, you'll need to save the following bookmark - the best way is to save the link below as a bookmark on your computer and then sync it to your iPad via iTunes or MobileMe: HTML5 AirPlay Bookmarklet. Alternatively, bookmark this page on your iPad and then copy the text below:

javascript:d=document,e=d.createElement('script');e.src='https://bendodson.com/bookmarklets/ios-airplay.js?'+(new%20Date()*1);void(d.body.appendChild(e));

You now need to edit the bookmark you saved for this page and paste the code above into the URL (you'll probably want to rename it as well).

Once the bookmark is saved, you just need to go to any HTML 5 video (such as cnn.com or tvcatchup.com) online and start playing it. You'll notice if you look at the AirPlay window that you can only stream audio. If you now load the bookmark, the video should disappear, and then come back with AirPlay now enabled for video. This short video below will demonstrate the process a little better:

So how does it work? To get AirPlay to send a video stream in Safari, you need to add the attribute x-webkit-airplay="allow" to the video tag. I assumed that by adding this to an existing video via JavaScript then it would automatically work. However, Apple have been slightly clever and ignore any parameters you add via JavaScript. So, I instead use JavaScript to add the new attribute before cloning the video, removing it from the DOM, and then re-adding it. This re-addition to the DOM seems to trigger something in Safari which causes it to re-read the AirPlay attribute and allow you to stream the video. Please note that this will only work with iOS 4.3 on the iPad with iOS 4.3 on the Apple TV. If you try and stream to an Apple TV running older software, Safari will crash.

This is currently in a very rough stage yet so far has been tested and works with vimeo.com as well as native HTML 5 video on websites such as apple.com - it doesn't work with any HTML 5 video wrapped in a custom skin (e.g. the BBC iPlayer) but who knows what will be possible in the future. If you have any additions or improvements, please get in touch.

Update: A few people have contacted me about embedded videos such as the one on this page. Unfortunately, with Vimeo at least, these don't work as they are packaged up in an iFrame rather than being native <video> content. JavaScript isn't able to access the contents of an iFrame from a different domain due to the cross-domain security policy. If videos are embedded natively, then they'll play fine, but for iFrame content you'll need to go to the original website.

Update: This workaround is still functioning in iOS 4.3 beta 2.

Update: And it is still working in iOS 4.3 beta 3.

Update: And finally, this works in the publicly available version of iOS 4.3 - enjoy!

Update: I've altered the article slightly as vimeo.com is now adding the AirPlay functionality automatically to their website (so I've changed the examples given). I've also added a copy-paste section of code as that may be easier for getting the bookmarklet onto your iPad.

Update: I've taken a look at using this on iOS 5.0 beta 1 but so far the AirPlay functionality isn't working well. This is more likely an issue with the beta (which is fairly buggy).

Update: iOS 5 has changed the defaults for how AirPlay works. This means that all online video is now classed as AirPlay enabled (unless the content provider opts out) making this bookmark now redundant.