HTML 视频层上方的上下文菜单变得不可点击

Question

我创建了自定义上下文菜单，并希望将其用作我的项目的播放列表。

但是在我的视频帧上它变得无法点击。

这是 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>

Answer 1

新答案

我发现存在一个更简单的解决方案来解决您的问题。如果您只是将视频标签放在上下文菜单之前，就可以达到目的：

<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 的样式放在视频 class 和 z-index: 2 在上下文菜单 class 上，这就成功了（至少在 chrome 中，我没有尝试任何其他浏览器）。

HTML 视频层上方的上下文菜单变得不可点击

Context menu becomes unclickable above HTML video layer

html

javascript

css

contextmenu

新答案

原答案