iPad:Mobile Safari,HTML5 <video>和jquery转换

Question

我正在为一个特定于iPad的网站构建一个简单的概念验证,该网站将使用视频转换将用户从一个部分带到另一个部分.出于概念证明的目的,每个"部分"仅是具有位于其上方的半透明内容文本框的图像.只有2个部分,"主页"和"联系人",他们通过z-indexing将过渡视频夹在它们之间.概念验证的想法是点击"主页"部分使其消失,然后回放过渡视频,(完成后)消失以显示"联系"部分.这个版本的演示版在iPad和Safari for Windows和OS X上运行良好.这是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');
    });
  });
});

我想要做的是fadeOut()在点击"home"部分时使用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>

Answer 1

ampt 在Inserting HTML5 video using JavaScript for iPad上的回答对我有用。看来移动Safari+通过JS动态添加视频有一个bug。