新答案

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索引，所以我会寻找另一种解决方案，但是我将z-index: 1的样式放在视频类和z-index: 2上面的上下文菜单类中，这就是那个技巧（至少在chrome中，我没有尝试过任何其他浏览器）。

上下文菜单在HTML视频图层上变得无法点击

1 个答案:

新答案

原始答案