Я создаю простое доказательство концепции веб-сайта для iPad, которое будет использовать видеопереходы для перехода пользователей из одного раздела в другой.В целях подтверждения концепции каждый «раздел» представляет собой просто изображение с полупрозрачным текстовым полем с содержимым, расположенным над ним.Есть только 2 раздела, «дом» и «контакт», и у них есть видео перехода, зажатое между ними посредством z-индексации.Идея доказательства концепции заключается в том, что нажатие на раздел «home» приводит к его исчезновению, после чего воспроизводится видео перехода, которое (после завершения) исчезает, открывая раздел «contact».Все отлично работает с этой версией демонстрации на iPad и в Safari для 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');
});
});
});
Что я хотел бы сделать, это использовать эффект 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>