Video.js: Disable right click on the player

[giggioman00]

Hi, how can I disable the right click on your video player?
I've seen a site that use your player and they have disable right click on player. If needed I can share the link...

Thank you.

[tjenkinson]

You just need to add a context menu handler to the video tag and prevent the default operation like this.

If you are using jquery you can do this:

// $video contains a reference to the video tag

// disable browser context menu on video
$video.on('contextmenu', function(e) {
    e.preventDefault();
});

If you're going with plain javascript have a read of http://stackoverflow.com/a/4909312 because it looks like ie8 might use "attachEvent" not "addEventListener". I presume jquery handles this.

[odev79]

without jquery? Only javascript please!! :)

[tjenkinson]

Well you just need to do what's at that link replacing document with the variable you have a reference to the video tag in.

You can get a reference by using an id like this:
var myVideo = document.getElementById("myVideo"); where "myVideo" would be the text in the "id" attribute on the video tag.

So:

var myVideo = document.getElementById("myVideo");
if (myVideo.addEventListener) {
    myVideo.addEventListener('contextmenu', function(e) {
        e.preventDefault();
    }, false);
} else {
    myVideo.attachEvent('oncontextmenu', function() {
        window.event.returnValue = false;
    });
}

[odev79]

Great!!! I prefer JavaScript to jQuery, thanks!!!

[dmlap]

@tjenkinson thanks for the two simple solutions. This one seems answered to me.

[giggioman00]

Which is better? jquery or javascript?

[tjenkinson]

If you are already using jQuery on your site then I'd go with that. Otherwise I'd probably go with the plain JavaScript method because it seems silly to require an entire library if all you want to do is disable right click.

On 16 Jul 2015, at 17:28, giggioman00 [email protected] wrote:

Which is better? jquery or javascript?

—
Reply to this email directly or view it on GitHub.

[giggioman00]

Ok thank you... But users who use Firebug could remove that script?

[tjenkinson]

Yes but that's the same for both methods. The user has complete control over their machine and therefore can modify what they receive however they want, this is why browser extensions can do what they do. There's no way to block that, your control ends when the content leaves your server really.

On 16 Jul 2015, at 18:05, giggioman00 [email protected] wrote:

Ok thank you... But users who use Firebug could remove that script?

—
Reply to this email directly or view it on GitHub.

[giggioman00]

Ok thank you. I'm testing javascript method since my site doesn't use jquery, but dowsn't work...

my id video is:

and the script I have added is

var example_video_1 = document.getElementById("example_video_1");
if (example_video_1.addEventListener) {
example_video_1.addEventListener('contextmenu', function(e) {
e.preventDefault();
}, false);
} else {
example_video_1.attachEvent('oncontextmenu', function() {
window.event.returnValue = false;
});
}

But dowsn't work, I can still right click on the player and on the page. I'm using firefox. What's wrong?

[tjenkinson]

Ok so a guess would be that your script is running before the dom has finished loading, and therefore the video tag isn't available when the code runs. The way to determine if the dom has loaded is with another event, meaning you'd have to essentially do this again.

So actually I'd probably just download jquery and put the jquery code above inside a ready callback as described here: http://stackoverflow.com/a/7992411/1048589

[giggioman00]

Maybe I'm doing something wrong but doesn't work...

I've tried both, javascript and jquery script inside the code you linked to me and doesn't work

$(document).ready(function() {var example_video_1 = document.getElementById("example_video_1");
if (example_video_1.addEventListener) {
example_video_1.addEventListener('contextmenu', function(e) {
e.preventDefault();
}, false);
} else {
example_video_1.attachEvent('oncontextmenu', function() {
window.event.returnValue = false;
});
}});

---

$(document).ready(function() {$example_video_1.on('contextmenu', function(e) {
e.preventDefault();
});});

[tjenkinson]

Well the second one won't work because you're not declaring $example_video_1 anywhere. Have you got a link to the page so it's a bit easier to see what's going on?

[giggioman00]

Wait, I'm using joomla... Maybe this could be the problem?

EDIT: I used this script under the video

window.addEvent('domready', function() {document.addEvent('contextmenu',function(e) {return false;});});

and now works very well. All the page have right click disabled but it's not a problem. Anyway thank you for your help

[tjenkinson]

Could be. It will be easier to figure out what's going on if you can send a link to the page.

On 16 Jul 2015, at 23:11, giggioman00 [email protected] wrote:

Wait, I'm using joomla... Maybe this could be the problem?

—
Reply to this email directly or view it on GitHub.

[atul121001]

If the code still not working .. make a wrapper element around video give some id or class to it .. ... give some time out delay for some sec to document load .. and then try the above code with that ..it will work

[Abdulmanan0315]

Use this plugin along with the disable behaviours
https://github.com/brightcove/videojs-contextmenu-ui

[ursularezende]

Hello everyone!

I´m trying to disable the right click over the video that was incorporated on my moodle, but its not working. I´ve already tried all the tips and codes above, but none of them worked.
Any tips of what i can do!

Thanks

[theathleticnerd]

but

Were you able to solve it. I'm also stuck