Tôi đang xây dựng một chứng minh đơn giản cho một trang web dành riêng cho iPad có thể sử dụng chuyển tiếp video để đưa người dùng từ phần này sang phần khác. Với mục đích chứng minh khái niệm, mỗi "phần" chỉ là một hình ảnh có hộp văn bản nội dung bán trong suốt được đặt ở trên nó. Chỉ có 2 phần, "nhà" và "liên hệ", và họ đã có một video chuyển tiếp kẹp giữa chúng thông qua z-indexing. Ý tưởng cho bằng chứng về khái niệm là việc nhấp vào phần "nhà" khiến nó biến mất, tiếp theo là phát lại video chuyển đổi, mà (sau khi hoàn thành) biến mất để tiết lộ phần "liên hệ". Tất cả mọi thứ đang làm việc tốt với phiên bản này của bản demo trên iPad và trên Safari dành cho Windows và OS X. Đây là JS:iPad: Mobile Safari, HTML5 <video> và chuyển tiếp 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');
});
});
});
Những gì tôi muốn làm là sử dụng một hiệu ứng jQuery fadeOut() để làm mờ dần các hộp văn bản trước khi bắt đầu video khi phần "trang chủ" được nhấp vào. Mã có vẻ đơn giản đủ:
$('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');
});
});
});
});
và nó hoạt động chính xác như mong muốn trên các phiên bản Safari dành cho máy tính để bàn. Trên iPad, tuy nhiên, hộp văn bản mờ dần như mong đợi và phần nhà biến mất là tốt, nhưng video ngoan cố từ chối bắt đầu chơi. Tôi thực sự không biết tại sao điều này lại xảy ra, nhưng đó là những gì đang xảy ra. Tôi đánh giá cao bất kỳ lời khuyên nào bạn có thể có!
Ngẫu nhiên, đây là đánh dấu:
<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>
Lưu ý phụ: Ngoài ra, hãy kiểm tra từ liên kết ở trên (http://diveintohtml5.org/video.html) cách anh chàng này mã hóa video ở ba định dạng + flash (!) Để đảm bảo nó hoạt động cho mọi trình duyệt hoặc thiết bị. – bcm
URL diveinto đã thay đổi thành diveintohtml5.ep.io – DanBeale