我已經創建了自定義上下文菜單，並且希望將其作爲我的項目的播放列表。上下文菜單在HTML視頻圖層上方變得不可點擊

但是，它變得對我的視頻幀無法點擊。

這是HTML視頻標籤的性質是什麼？

這裏是我的代碼段

<!doctype html> 
<html> 
<head> 
<title>Dee</title> 
<style type="text/css"> 
*{ 
    margin: 0; 
    padding: 0; 
    } 

    html, body, .container{ 
    height: 100%; 
    } 

    body{ 
    font-family: verdana; 
    font-size: 10px; 
    } 

    .container{ 
    background: #f6f6f6; 
    } 

    .context-menu { 
    width: 200px; 
    height: auto; 
    box-shadow: 0 0 20px 0 #ccc; 
    position: absolute; 
    display: none; 
    } 

    .context-menu ul{ 
    list-style: none; 
    padding: 5px 0 5px 0; 
    } 

    .context-menu ul li:not(.separator){ 
    padding: 10px 5px 10px 5px; 
    border-left: 4px solid transparent; 
    cursor: pointer; 
    } 

    .context-menu ul li:hover{ 
    /*background: #eee;*/ 
    background: #fff; 
    border-left: 4px solid #666; 
    } 

    .separator{ 
    height: 1px; 
    background: #dedede; 
    /*background: #fff;*/ 
    margin: 2px 0 2px 0; 
    } 

    .videoClass{ 
    background: #fff; 
    border-color: #fff; 
    } 
</style> 
</head> 

<body> 
    <div class="container" oncontextmenu="return showContextMenu(event);"> 
    <div id="contextMenu" class="context-menu"> 
     <ul> 
     <li>List</li> 
     <li>List</li> 
     <li>List</li> 
     <li class="separator"></li> 
     <li>List</li> 
     </ul> 
    </div> 
    <video id="myVideo" class="videoClass" controls width="500" src="trailer.mp4"></video> 
    </div> 


    <script type="text/javascript"> 
    window.onclick = hideContextMenu; 
    window.onkeydown = listenKeys; 
    var contextMenu = document.getElementById('contextMenu'); 

    function showContextMenu(){ 
     contextMenu.style.display = 'block'; 
     contextMenu.style.left = event.clientX + 'px'; 
     contextMenu.style.top = event.clientY + 'px'; 
     return false; 
    } 

    function hideContextMenu(){ 
     contextMenu.style.display = 'none'; 
    } 

    function listenKeys(event){ 
     var keyCode = event.which || event.keyCode; 
     if (keyCode == 27) { //27 means escape key 
     hideContextMenu(); 
     } 
    } 
    </script> 
</body> 
</html>

來源

2016-07-27 J.Doe

新建答案

我發現，一個更簡單的解決您的問題存在。如果你只是把視頻標籤上下文菜單之前，該做的伎倆：

<video id="myVideo" class="videoClass" controls width="500" src="trailer.mp4"></video> 
<div id="contextMenu" class="context-menu"> 
    <ul> 
     <li>List</li> 
     <li>List</li> 
     <li>List</li> 
     <li class="separator"></li> 
     <li>List</li> 
    </ul> 
</div>

原來的答案

在我有限的經驗，使用Z-index的我還沒有愛過，所以我會找另一種解決方案，但我在視頻類上放置了z-index: 1的樣式，並在上下文菜單類上放置了z-index: 2，並且這樣做的伎倆（至少在Chrome中我沒有嘗試任何其他瀏覽器）。

來源

2016-07-27 22:42:16

謝謝！它像一個魅力！ –

上下文菜單在HTML視頻圖層上方變得不可點擊

回答

新建答案

原來的答案

相關問題