Disable context menu on video element

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>

Answer

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