iPad：Mobile Safari，HTML5 <video>和jquery轉換

我正在爲特定於iPad的網站構建一個簡單的概念驗證性網站，該網站將使用視頻轉換將用戶從部分轉移到部分。爲了概念驗證的目的，每個「部分」只是一個半透明內容文本框位於其上的圖像。只有2個部分，「家」和「聯繫人」，他們已經通過z索引夾入了他們之間的過渡視頻。概念驗證的想法是，單擊「主頁」部分會使其消失，然後播放過渡視頻，該視頻在完成後會消失以顯示「聯繫人」部分。一切工作正常與此版本的iPad和Safari瀏覽器上對Windows和OS X.這裏演示的是在JS：iPad：Mobile Safari，HTML5 <video>和jquery轉換

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'); 
    }); 
    }); 
});

我希望做的是使用一個jQuery效果淡出文本框，然後在點擊「主頁」部分時開始播放視頻。該代碼似乎很簡單：

$('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'); 
     }); 
    }); 
    }); 
});

它的工作原理與桌面版Safari完全相同。然而，在iPad上，文本框按預期淡出，主頁部分消失，但視頻頑固地拒絕開始播放。我真的不知道爲什麼會這樣，但那就是發生了什麼。我會很感激你的任何建議！

順便說一句，這裏的標記：

<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>

來源

2010-06-15 justinbach