禁用視頻元素的上下文菜單

以下代碼的目的是禁用鼠標右鍵和視頻容器元素（客戶請求）上的上下文菜單的右鍵單擊。但是，它似乎也擊倒了我們需要啓動視頻所需的左鍵單擊。禁用視頻元素的上下文菜單

我該如何編碼，以便只有右鍵點擊被禁用。

$(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>

來源

2014-07-03 wingyip

你能提供你的元素女巫類'。視頻 - container'的代碼？謝謝 – pes502

向我們顯示您的HTML代碼。 – urbz

您的客戶知道，這實際上並不會阻止任何人右鍵單擊其真正想要的人，對吧？相關：http://stackoverflow.com/questions/9756837/prevent-html5-video-from-being-downloaded-right-click-saved –

您可以檢查鼠標右鍵是否被點擊用event.which jQuery中。 1代表左邊，2代表中間，3代表右邊的鼠標按鈕。

嘗試綁定您的上下文菜單單擊右鍵時會覆蓋函數，否則將其解除綁定。我認爲應該這樣做。

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

來源

2014-07-03 13:34:06 Lennart

您不應該檢查哪個按鈕被點擊。

通過將oncontextmenu="return false;"添加到視頻標籤，您可以直接禁用HTML而不使用JavaScript。

像這樣：

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

來源

2017-12-04 02:13:45 jsherk

禁用視頻元素的上下文菜單

回答

相關問題