iPad : 모바일 사파리, HTML5 <video> 및 jquery 전환

동영상 전환을 사용하여 섹션간에 섹션을 가져 오는 iPad 전용 웹 사이트에 간단한 개념 증명 개념을 구축하고 있습니다. 개념 증명을 위해 각 "섹션"은 그 위에 반투명 내용 텍스트 상자가있는 이미지 일뿐입니다. "집"과 "연락처"라는 2 개의 섹션 만 있어도 z- 색인을 통해 전환 비디오를 사이에 끼워 넣었습니다. 개념 증명을위한 아이디어는 "홈"섹션을 클릭하면 사라지게되고, (완료시) "연락처"섹션이 드러나는 장면 전환 비디오가 재생됩니다. 모든 것이 아이 패드와 여기에 윈도우와 OS X 용 사파리에 데모 버전으로 잘 작동하는 JS입니다 : 내가하고 싶은 무엇iPad : 모바일 사파리, HTML5 <video> 및 jquery 전환

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

그리고 정확히 사파리의 데스크톱 버전에서 원하는대로 작동합니다. 그러나 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>

출처

2010-06-15 justinbach