iPad上的HTML5視頻分層

我的視頻由Ooyala提供，可以在所有設備上播放。當用戶在iPad上並嘗試通過下拉式subnav查看頁面時，會發生該問題。 subnav的每一部分都不過是隱藏的，通過CSS顯示的ul>li和div。當視頻正在播放或暫停（不加載時），並且用戶點擊主導航（以顯示相應的subnav）時，subnav覆蓋視頻。然而，這些鏈接都沒有響應水龍頭。當試圖點擊subnav鏈接時，視頻就好像被點擊（顯示洗滌器）。iPad上的HTML5視頻分層

我已經試過all sorts的solutions，包括所有相關的元素與z-index搞亂，都無濟於事。有什麼我失蹤？

如果您想自己嘗試一下，請在iPad上轉到http://www.cordblood.com，點擊（或等待）第二張（或第三張或第四張）幻燈片，點擊「觀看視頻」，點擊播放（您可以如果你願意，也可以暫停視頻），點擊一個主導航，然後嘗試點擊subnav顯示的其中一個選項。

來源

2012-03-30 Jason

我使用流水遊戲和一個簡單的CSS下拉菜單，並有同樣的問題。

我有下拉菜單，當點擊時，覆蓋部分視頻區域。子菜單按預期顯示在視頻上，但沒有觸摸事件正在發送。

我通過組合從其他一些建議回答this question固定它：我設置知名度：打開菜單和知名度時隱藏：可見關閉子菜單時，並設置-webkit -transform-style：preserve-3d視頻的CSS屬性。

下面是相關的代碼。我忽略了菜單欄的CSS，但它完全符合您的預期 - 從而生成一個涵蓋部分視頻的菜單。

菜單和視頻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"}); 
    } 
); 
);

來源

2012-03-31 22:31:12 Troy

@Jason：我遇到了同樣的問題，並嘗試了你在這裏接受的解決方案。但是沒有運氣！你能指導我哪裏可以錯了嗎？ – Hiral 2012-06-04 06:02:11

@Hiral：我已經在生產代碼中工作了。發佈一些細節，如果你想得到一些幫助。 – Troy 2012-06-06 15:56:28

我也有類似的概率lem，但解決方案要簡單得多。只需要從視頻標籤中刪除控件屬性即可。正如我使用jwplayer，視頻標籤是動態生成的，所以我需要使用js刪除屬性。使用jQuery：

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

就我而言，我已經使用自定義控制器，所以我不需要他們......但我想（我沒試過），你可以隱藏和顯示他們動態地啓用某些用戶操作。

來源

2012-12-28 02:38:13

iPad上的HTML5視頻分層

回答

相關問題