Enabling AirPlay in HTML5 Video

Video sites around the web are loving HTML5 video right now. And, with the popularity of the AppleTV a lot of sites are looking at the new features of AirPlay. This small addition to the src tag for your .mp4 file will enable the use of AirPlay from an iPad or iPhone.

by Mike Green

HTML

<h1 class="title">Enabling AirPlay in HTML5 Video</h1>
<section id="video">
    <video x-webkit-airplay="allow" preload controls poster="http://theflashblog.com/images/believe.jpg" width="680" height="382">
        <!--H.264 .mp4 video for the majority of supported devices and browsers -->
        <source x-webkit-airplay="allow" src="http://adobe.edgeboss.net/download/adobe/adobetv/platform_evangelism/believe.mp4" type="video/mp4" />
        
        <!--Ogg video for Firefox. Free Ogg generator addon for Firefox http://firefogg.org/ -->
        <source src="http://leebrimelow.com/video/believe.ogg" type="video/ogg" />
    </video>
</section>
<!-- Credit to Lee Brimelow for the Ogg video fallback -->

CSS

h1.title {color:#000;font:bold 24px/28px Arial, Verdana, sans-serif;margin:15px auto;text-align:center;}
section#video {display:block;margin:0 auto;width:680px;}