私はカスタムコンテキストメニューを作成しており、これをプロジェクトのプレイリストとして使用したいと考えています。コンテキストメニューがHTMLビデオレイヤの上で解除不可になる

ただし、私のビデオフレームではクリップできなくなります。

これはHTMLのvideoタグの性質ですか？

は、ここで私はあなたの問題をより簡単な解決策が存在することを発見し、私のスニペット

<!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タグをつけた場合、それはトリックん：

<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インデックスを使用して愛していないので、私は探します別の解決方法がありますが、私はビデオクラスにz-index: 1のスタイルを入れ、コンテキストメニュークラスにはz-index: 2を入れました。そのトリックは（少なくともクロムでは他のブラウザを試しませんでした）行いました。

出典

2016-07-27 22:42:16

ありがとうございます！それは魅力のように機能します！ –

コンテキストメニューがHTMLビデオレイヤの上で解除不可になる

答えて

新しい回答

オリジナル回答私の限られた経験で

関連する問題