自定义上下文菜单无法处理HTML视频标记

Question

我想知道如何在HTML视频标签之上创建我自己的上下文菜单（类似于youtube菜单）。

我正在使用名为rClick.js

的库

代码段

<video id="video1" class="videoMenu" width="33.33%"  style="padding: 2px 2px 2px 2px;">
              <source src="./assets/samples/trailer.mp4" type='video/mp4'>
            </video>
<script src="assets/js/rclickcontextMenu/rclick.min.js"></script>
<script type="type/javascript">
$(function(){
  $(window).rClick({
    click: null, // right click
    element: $('#context-menu')
  });
});

<div id="context-menu" class="hidden">
<ul>
  <li><a href="#">Copy</a></li>
  <li><a href="#">Paste</a></li>
  <li><a href="#">Delete</a></li>
</ul>

不知何故，图书馆不应该像它应该的那样工作，而是显示默认菜单。这是HTML视频标签的问题（经过几天的广泛研究，我找不到任何现有的例子）？

Answer 1

此功能目前（2016年12月25日）仅在Firefox中支持。 在不同的浏览器中试试这个（http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_oncontextmenu）。

如果您想为所有浏览器提供上下文菜单，可以在javascript中禁用默认菜单并自行绘制新菜单。 GitHub中有一些现有的代码用于您的目的。我自己亲自画菜单。您可以参考http://www.voidtricks.com/custom-right-click-context-menu/了解更多详情。