iPad: Mobile Safari, HTML5 <video>, and jquery transitions
- by justinbach
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>
