1

The intent of the code below is to disable the right click of the mouse button and the context menu on a video container element (customer request). However, it also seems to knock out the left button click which we need in order to start the video.

How can I code this so that only the right click is disabled.

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

HTML is:

        <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>
wingyip
  • 3,465
  • 2
  • 34
  • 52
  • 2
    Can you provide code of your element witch class `.video-container`? thanks – pes502 Jul 03 '14 at 12:18
  • Show us your HTML code. – urbz Jul 03 '14 at 12:18
  • 1
    Your customer knows that this won't actually stop anybody from right-clicking on it who really wants to, right? Related: http://stackoverflow.com/questions/9756837/prevent-html5-video-from-being-downloaded-right-click-saved – Cᴏʀʏ Jul 03 '14 at 12:19
  • Have added the HTML to the original question. Yes Cory The limitations of this approach have been explained to the customer. – wingyip Jul 03 '14 at 12:56

3 Answers3

4

You can check whether the right mouse button was clicked with event.which in jQuery. 1 refers to left, 2 to middle and 3 to right mouse button.

Try to bind your contextmenu overwrite function when the right button is clicked and unbind it otherwise. I think that should do the trick.

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

You should not need to check which button was clicked.

You can disable context menu straight from HTML without javascript by adding oncontextmenu="return false;" to the video tag.

Like this:

<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>
jsherk
  • 6,128
  • 8
  • 51
  • 83
0

oncontextmenu="return false;" just add this in inside < video > element

ozakiharumi
  • 103
  • 1
  • 7