Disable context menu on video element

Question

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>

Can you provide code of your element witch class `.video-container`? thanks — pes502, Jul 03 '14 at 12:18
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

Lennart · Accepted Answer · 2014-07-03T13:52:14.097

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');
       }
   });
});

score 3 · Answer 2 · answered Dec 04 '17 at 02:13

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>

answered Dec 04 '17 at 02:13

jsherk

5,736
8
47
78

Simple and efficient ! – Entretoize May 05 '21 at 09:48

score 0 · Answer 3 · answered Mar 24 '18 at 06:47

0

answer shared by @jshrek is perfectly right,but if that request from your customer was not to show/hide all download options then you might need to to remove control attribute from the video tag also.

answered Mar 24 '18 at 06:47

rohit mishra

9
1
6

Please do not answer with a comment/question. Understandably, your rep is too low to comment, but that still does not mean answers should be used to make comments as an alternative. It would be preferable if you deleted this. – Athul Nath Mar 24 '18 at 07:10

score 0 · Answer 4 · answered Jan 10 '22 at 21:14

0

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

answered Jan 10 '22 at 21:14

ozakiharumi

53
5

Disable context menu on video element

4 Answers4