jquery - iPad:Mobile Safari、HTML5 和 jquery 转换

Question

我正在为特定于 iPad 的网站构建一个简单的概念验证，该网站将使用视频转换将用户从一个部分带到另一个部分。出于概念验证的目的，每个“部分”只是一个图像，上面有一个半透明的内容文本框。只有 2 个部分，“家庭”和“联系人”，他们通过 z-indexing 将过渡视频夹在中间。概念验证的想法是单击“主页”部分使其消失，然后播放过渡视频，(完成后)消失以显示“联系人”部分。在 iPad 和适用于 Windows 和 OS X 的 Safari 上，此版本的演示一切正常。这是 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');
    });
  });
});

我想做的是使用 jQuery fadeOut() 效果在单击“主页”部分时开始播放视频之前淡出文本框。代码看起来很简单:

$('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>

Answer 1

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

应该是

$(document).ready(function() {

我不知道这是否能解决您的问题，但不会有什么坏处...