Điện thoại di động iPad Safari dường như bỏ qua vị trí z-indexing cho các phần tử video html5

Question

Tôi nhận được phần tử video trên trang hoạt động tốt cả trên thiết bị di động và máy tính để bàn safari. Tôi có một trình đơn thả xuống seme-minh bạch đang hoạt động tốt. Vấn đề là, khi menu ở trên phần tử video, trên safari trên máy tính để bàn, tôi có thể xem video dưới menu (như mong muốn), trong khi trên phiên bản di động, phần tử video ở trên nền trước (xấu xí) bất kể tôi nói gì css. Có bất kỳ công việc xung quanh?

Answer 1

Sự cố chỉ xảy ra nếu phần tử video được tạo động. Nếu phần tử chỉ nằm trong trang khi nó được tải, z-index hoạt động tốt.

Bạn có thể sửa z-index trên video được tạo động bằng cách cung cấp phần tử video -webkit-transform-style: preserve-3d.

Vâng, điều đó cũng tệ như chơi trên IE!

Answer 2

Thật không may là không.

Dựa trên kinh nghiệm và sự hiểu biết về cách thức hoạt động của iOS hiện tại, điều này là không thể.

Mobile Safari trên iPad cắt một lỗ cho cửa sổ Quicktime, phát lại video bằng cách sử dụng khả năng tăng tốc phần cứng tích hợp để cải thiện thời lượng pin. (IPhone và iPod Touch chỉ mở nó trong một cửa sổ riêng để đạt được hiệu quả tương tự.)

Cửa sổ này không phát độc đáo với HTML khác trên trang. Trong thực tế, tôi đã không tìm thấy một cách để có được Safari di động để hiển thị bất cứ điều gì trên đầu trang của một thẻ. Tôi đoán là điều này là do tăng tốc phần cứng chỉ cho phép chia tỷ lệ và định vị video và chỉ có thể xử lý một video cùng một lúc.

Answer 3

Tôi đã quản lý để đặt div menu trên thẻ video html5 trong safari di động trên ipad. Thành thật mà nói tôi không có bất kỳ vấn đề gì và nó chỉ hoạt động. Nó có thể được mặc dù bởi vì tôi đã sử dụng hình ảnh động CSS3 và do đó GPU? Bạn có thể thử sử dụng hack để thêm phần tử vào GPU. Nếu bạn đặt -webkit-transform: translateZ(0); trên phần tử, nó sẽ buộc nó sử dụng GPU ...

Answer 4

-webkit-transform-style:preserve-3d và -webkit-transform:translateZ(0) không hoạt động đối với tôi.

Sử dụng Trình tạo luồng với plugin ipad và plugin thanh điều khiển cho phép tôi xóa thanh điều khiển được tạo ipad và thay thế bằng một thứ có thể được lập chỉ mục z bên dưới cửa sổ phương thức của tôi.

Answer 5

Tôi cũng gặp phải điều này. Điều duy nhất tôi có thể làm việc cho tôi là thêm

display:none 

vào thẻ video khi hiển thị div trên đó cần được nhấp vào.

Answer 6

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 câu hỏi này: Tôi thiết visibility: ẩn khi mở menu và visibility: nhìn thấy khi đóng menu con, và đặt - webkit-transform-style: bảo quản-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 7

Bạn có thể sửa z-index trên video được tạo động bằng cách cung cấp phần tử video -webkit-transform-style: preserve-3d.

Điều này làm việc cho tôi với yếu tố video được tạo động. Tôi cũng đặt z-index của div đặt quá mức thành z-index: 888; cũng có thể hữu ích.

Answer 8

Tôi gặp sự cố này xảy ra trên thiết bị di động có trình đơn canvas tắt. Khi menu đã qua video, bạn không thể nhấn vào bất kỳ mục menu nào.

Tôi đã khắc phục sự cố khi di chuyển video ở một nơi khác khi menu được bật bằng cách định vị nó hoàn toàn ở mức -100000px khi menu không được hiển thị, nó đặt lại vị trí tương đối.

Tôi thấy rằng việc sử dụng hiển thị không có tác dụng như khi bạn đặt nó thành chặn lại, video sẽ không hoạt động.

Tôi cũng đã thử đặt chiều cao thành 0 - điều này không hoạt động vì video vẫn dường như chiếm dung lượng mặc dù bạn không thể nhìn thấy nó.

Phương pháp cuối cùng có vẻ hơi khắc nghiệt nhưng nó không thực sự đáng chú ý khi nó đang được sử dụng.

Answer 9

Đây là mã sẽ hoạt động trên cả iPad và iPhone. Tôi đã thử gỡ bỏ các điều khiển và sau đó thêm chúng một lần nữa, nhưng điều này chỉ làm việc trên iPad không phải trên iPhone. Sau khi loại bỏ opacity và sau đó thêm nó một lần nữa nó làm việc trên iPhone cũng.

$("#overlay_open").click(function(){ 
    $("video").prop("controls", false); 
    $("video").css("opacity", 0); 
}); 

$("#overlay_close").click(function(){ 
    $("video").prop("controls", true); 
    $("video").css("opacity", 1); 
}); 

Answer 10

Chỉ cần chạy vào vấn đề này ngày hôm nay & phải rai cùng một giải pháp từ nhiều câu trả lời vì không ai xử lý đầy đủ các vấn đề ...

Tôi có yếu tố video trong một "xem bảng" danh sách phong cách sụp đổ đó đã ghi lại các sự kiện chạm trên iPhone khi cố gắng nhấn vào các mục danh sách khác. Trên iPhone, các video sẽ phát khi nhấn vào các yếu tố thu gọn khác đã xảy ra để chiếm cùng một vị trí trên màn hình.

Sửa chữa này yêu cầu tất cả các nội dung sau:

1) Sử dụng này:

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

... dường như không có bất kỳ tác dụng, nhưng tôi rời nó trong anyway. Mọi thứ đang hoạt động ngay bây giờ nên tôi không muốn vặn vẹo thêm nữa :)

2) Toggling visibility: hidden không hoạt động, và display:none không hoạt động như mong đợi.

3) Ngoài "mức hiển thị", thẻ video HTML5 thuộc tính controls cũng phải được thêm/xóa động. Hoặc:

$("video").css({visibility:"hidden"}).removeAttr("controls"); hoặc $("video").css({visibility:"visible"}).attr("controls", "controls");

4) Phải đặt tầm nhìn/điều khiển trên tải tài liệu dựa trên kích thước ban đầu trình duyệt/màn hình

5) Mặc dù mối quan tâm chính là hành vi iPhone screwy, tôi cũng đã phải tài khoản cho các thay đổi kích thước cửa sổ đáp ứng phía trên điểm ngắt truy vấn phương tiện nhỏ nhất 600px của tôi - nếu không video sẽ xuất hiện/biến mất ở kích thước màn hình sai.

$(window).resize(function(){ 
    if ($(window).width() > 600){ 
     $("video").css({visibility:"visible"}).attr("controls", "controls"); 
    } 
}); 

Khá một nỗi đau để làm việc xung quanh những gì bản chất là một điện thoại di động Safari lỗi ngu ngốc ... Tôi chắc chắn hy vọng nó hoạt động trên iPad khi tôi thử nghiệm nó sau này ...

Answer 11

Đối với bất cứ ai chạy vào các vấn đề với vẫn này , một bản sửa lỗi khác đã kết thúc với tôi là thay đổi các tùy chọn trong mã nhúng để không cho phép điều khiển, video được đề xuất và tùy chọn tiêu đề và trình phát video. Tôi đã thêm một Modernizr.MQ truy vấn đơn giản để thay đổi src cho máy tính bảng và điện thoại di động, và bao gồm những điều sau đây để src iframe cho điện thoại di động:

rel = 0 & điều khiển = 0 & ShowInfo = 0

tôi không bao giờ hoàn toàn theo dõi lý do tại sao điều này làm việc, nhưng tôi đoán là các điều khiển có một số kiểu tác nhân người dùng cung cấp cho họ chỉ số z cao và làm cho phần tử nằm trên đầu mọi thứ.