Enable iPad Airplay on HTML5 video

Question

I'm doing this to enable Airplay on HTML5 video for my iPad 1st generation with iOS 4.3.1.

// Prototype JS framework
$('videoContainer').appendChild(
    new Element(
        'video', {
            id: 'video0',
            src: 'http://shapeshed.com/examples/HTML5-video-element/video/320x240.m4v',  
            controls: 'true',
            width: '200',
            height: '200',
        }
    )
);

$('video0').writeAttribute('x-webkit-airplay', 'allow');

When I turn on airplay, all I hear is audio on the TV. How do I enable video too?

Edit:

According to Ben Dodson, you have to re-embed the video. I did this:

$('videoContainer').update($('videoContainer').innerHTML);

Is there any way around this? Seems so hacky and it's wasted processing.

Answer 1

Try reformatting it as a .mp4 movie, and make sure that it is H.264 video with AAC audio. It has to be H.264, or the iPad can't steam it. (Got this from http://macosrumors.com/2011/01/12/first-look-mobile-safari-airplay/)

Answer 2

In old version of iOS maximum resolution supporting is 1024*576, However your resolution is normal. Please convert the video using any video converter to .mp4 or H.264. .m4v is not supporting format.