iPad: Mobile Safari, HTML5 <video>, and jquery transitions

I'm building a simple proof-of-concept for an iPad-specific website that would use video transitions to bring user开发者_JAVA百科s from section to section. For purposes of the proof of concept, each "section" is just an image with a semitransparent content text box positioned above it. There are just 2 sections, "home" and "contact", and they've got a transition video sandwiched between them via z-indexing. The idea for the proof of concept is that clicking on the "home" section causes it to disappear, followed by playback of the transition video, which (upon completion) disappears to reveal the "contact" section. Everything is working fine with this version of the demo on the iPad and on Safari for Windows and OS X. Here's the JS:

var myVideo = document.getElementsByTagName('video')[0];
$('document').ready(function() {
  $('#home').click(function() {
    $(this).css('display','none');
    myVideo.play();
    myVideo.addEventListener('ended', function() {
      $('#transition').css('display','none');
    });
  });
});

What I'd like to do is use a jQuery fadeOut() effect to fade out the text box prior to starting the video when the "home" section is clicked. The code seems simple enough:

$('document').ready(function() {
  $('#home').click(function() {
    $('#home-copy').fadeOut('slow', function() { 
      $('#home').css('display','none');               
      myVideo.play();
      myVideo.addEventListener('ended', function() {
        $('#transition').css('display','none');
        $('#home-copy').fadeIn('slow');
      });
    });
  });
});

and it's working exactly as desired on desktop versions of Safari. On the iPad, however, the text box fades out as expected and the home section disappears as well, but the video stubbornly refuses to start playing. I really don't know why this would be the case, but that's what's happening. I'd appreciate any advice you might have!

Incidentally, here's the markup:

<div id="main-container">
  <div id="home-copy">
    <h1>Lorem Ipsum Dolor Sit Amet</h1>
    <p>Donec blandit pharetra luctus. Nam at porttitor odio. Nullam sem orci, venenatis sed pharetra eget, commodo rhoncus quam. Ut euismod vehicula bibendum. Curabitur in magna ante, id fringilla lacus. Nullam id elit eget lacus feugiat porta. Nulla vitae orci vehicula risus sagittis egestas quis sed justo.</p>
  </div>    
  <div id="home">
    <img src="images/home.jpg" width="1152" height="720" />
  </div>
  <video id="transition" src="video/home_to_contact_lo_res.mp4" preload width="1152" height="720"></video>
  <div id="contact">
    <img src="images/contact.jpg" width="1152" height="720" />
  </div>
</div>

$('document').ready(function() {

should be

$(document).ready(function() {

I don't know if this will solve your problem but it won't hurt...

ampt's answer on Inserting HTML5 video using JavaScript for iPad worked for me. It seems that there is a bug with mobile safari + videos added dynamically via JS.

I don't know the exact answer to your question, but have you tried out jQtouch?

Not sure if you got this working, but I read somewhere that the iPad will not auto-start any video clips, due to Apple not wanting people to have to pay to watch videos they dont really want to watch (on data-plans).

I will check if there is onerror event firing, code example here - http://www.w3.org/TR/html5/video.html

And also read up on the video codecs here to see if more information need to be included - http://diveintohtml5.ep.io/video.html (Also dbl check the ipad bug mentioned does not relate to your issue)