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

我想要做的是在点击“home”部分时，在开始播放视频之前使用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() {

我不知道这是否会解决你的问题，但不会伤害...

Answer 2

我不知道你问题的确切答案，但是你试过jQtouch吗？

Answer 3

我将检查是否存在onerror事件触发，代码示例在这里 - http://www.w3.org/TR/html5/video.html

此外，请阅读视频编解码器，了解是否需要包含更多信息 - http://diveintohtml5.ep.io/video.html （另外dbl检查提到的ipad bug与你的问题无关）

Answer 4

Inserting HTML5 video using JavaScript for iPad的{Ampt'答案对我有用。似乎有一个通过JS动态添加的移动safari +视频的错误。

Answer 5

不确定你是否有这个工作，但我在某处读到iPad不会自动启动任何视频片段，因为Apple不希望人们付钱观看他们不想看的视频（关于数据 - 计划）。

iPad：移动Safari，HTML5 <视频>和jquery过渡</video>

5 个答案: