iPad：Mobile Safari、HTML5<视频>和 jquery 过渡

发布于 2024-09-05 22:21:30 字数 2007 浏览 1 评论 0原文

我正在为 iPad 专用网站构建一个简单的概念验证，该网站将使用视频过渡将用户从一个部分带到另一个部分。出于概念证明的目的，每个“部分”只是一个图像，其上方有一个半透明的内容文本框。只有 2 个部分，“主页”和“联系人”，并且通过 z 索引将过渡视频夹在中间。概念验证的想法是，单击“主页”部分会使其消失，然后播放过渡视频，该视频（完成后）会消失以显示“联系人”部分。此版本的演示在 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>

原文

I'm building a simple proof-of-concept for an iPad-specific website that would use video transitions to bring users 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>

分享到QQ

分享到微博