Question

以下代码的目的是禁用右键单击鼠标按钮和视频容器元素上的上下文菜单（客户请求）。但是，它似乎也会删除我们需要的左键单击以启动视频。

如何对此进行编码，以便仅禁用右键单击。

$(document).ready(function () {
    $('.video-container').bind('contextmenu',  function () { return false; });
});

HTML是：

        <div class="video-container" data-videoname="" data-flash="http://yyy.net/video1.flv">
            <video id="flashContent" width="944" height="531" controls="controls">
                <source src="http://yyy.net/video1.mp4" type="video/mp4">
                <source src="http://yyy.net/video1.ogv" type="video/ogg">
            </video>
            <div class="poster">
                <div class="content">
                    <img src="/media/es-es/121111/different.png" width="944" height="531">
                    <img class="button" alt="Play this video" src="../../images/buttons/icon_video_play.png">
                </div>
            </div>
        </div>

Answer 1

您可以检查是否在jQuery中使用 event.which 单击了鼠标右键。 1表示左键，2表示中键，3表示鼠标右键。

单击右键时尝试绑定 contextmenu 覆盖函数，否则解除绑定。我认为应该这样做。

$(document).ready(function () {
   $('.video-container').mousedown(function(event) {
      if(event.which === 3) {
         $('.video-container').bind('contextmenu',function () { return false; });
       }
       else {
         $('.video-container').unbind('contextmenu');
       }
   });
});

Answer 2

您不需要检查点击了哪个按钮。

您可以在不使用javascript的情况下直接从HTML中停用上下文菜单，方法是将oncontextmenu="return false;"添加到视频代码中。

像这样：

<video oncontextmenu="return false;" id="my-video-player" width="854" height="480" controls autoplay>
  <source src="https://example.com/link-to-my-video.mp4" type="video/mp4">
</video>

Answer 3

@jshrek分享的答案是完全正确的，但如果客户的请求不显示/隐藏所有下载选项，那么您可能还需要从视频标记中删除控制属性。

禁用视频元素上下文菜单

3 个答案: