Phân đoạn video HTML5 trên iPad

Question

Tôi có video được phân phát theo số Ooyala phát tốt trên tất cả các thiết bị. Sự cố xảy ra khi người dùng ở trên iPad và cố gắng xem một trang qua một mạng phụ thả xuống. Mỗi phần của subnav không có gì hơn ul>li và div bị ẩn và hiển thị qua CSS. Khi video đang phát hoặc tạm dừng (không phải trong khi đang tải) và người dùng nhấn vào điều hướng chính (để hiển thị kênh phụ tương ứng), mạng phụ sẽ bao gồm video. Tuy nhiên, không có liên kết nào trong số này liên kết với các vòi. Khi cố gắng khai thác các liên kết subnav, video phản hồi như thể nó đang được khai thác (hiển thị bộ lọc).

Tôi đã thử allsorts trong số solutions, bao gồm cả việc làm lộn xộn với z-index trên tất cả các yếu tố liên quan, tất cả đều không có kết quả. Có cái gì tôi đang mất tích?

Nếu bạn muốn thử điều này cho chính mình, hãy truy cập http://www.cordblood.com trên iPad, nhấp (hoặc đợi) trang chiếu thứ hai (hoặc thứ ba hoặc thứ tư), nhấp vào "xem video", nhấn phát (bạn có thể tạm dừng video nếu bạn muốn, cũng vậy), nhấn vào một nav chính, và sau đó thử nhấn một trong các tùy chọn mà subnav hiển thị.

Answer 1

Tôi đang sử dụng trình tạo luồng và trình đơn thả xuống CSS đơn giản và có cùng vấn đề.

Tôi có trình đơn thả xuống, khi nhấn vào, bao phủ một phần của khu vực video. Menu phụ hiển thị trên video như mong đợi, nhưng không có sự kiện chạm nào được gửi đi.

tôi cố định nó bằng cách kết hợp một vài gợi ý từ những người khác trả lời this question: Tôi thiết visibility: ẩn khi mở menu và visibility: nhìn thấy khi đóng menu con, và đặt -webkit -transform-style: preserve-3d Thuộc tính CSS trên video.

Đây là mã thích hợp. Tôi đã loại bỏ CSS cho thanh thực đơn, nhưng nó làm những gì bạn có thể mong đợi - dẫn đến một menu bao gồm các phần của video.

menu và video HTML

<div id='nav'> 
    <ul> 
    ... <!-- bunch of ul/li stuff here for the menu and submenus --> 
    </ul> 
</div> 
<div id='videoplayer'><!-- for flowplayer --></div> 

CSS

video { 
    -webkit-transform-style: preserve-3d; 
} 

Javascript

$(document).ready(function(){ 
    $("#nav li").hover(
    function() { 
     $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(300); 
     $("video").css({visibility:"hidden"}); 
    }, 
    function(){ 
     $(this).find('ul:first').css({visibility: "hidden"}); 
     $("video").css({visibility:"visible"}); 
    } 
); 
); 

Answer 2

Tôi đã có một prob tương tự lem, nhưng giải pháp đơn giản hơn nhiều. Chỉ cần xóa thuộc tính điều khiển khỏi thẻ video. Khi tôi đang sử dụng jwplayer, thẻ video được tạo động, vì vậy tôi cần phải loại bỏ thuộc tính bằng cách sử dụng js. Với jquery:

$("video").removeAttr("controls"); 

Trong trường hợp của tôi, tôi đã sử dụng một bộ điều khiển tùy chỉnh, vì vậy tôi không cần họ ... nhưng tôi cho rằng (tôi chưa thử), bạn có thể ẩn và hiển thị chúng tự động dựa trên một số hành động của người dùng.