Video.js - preventing click-to-play functionality

Question

I'm using video.js to embed a video into an HTML page. It is to be used as a ipad-only web app so I believe that it's using the native HTML5 player. I'm trying to disable the click-to-play functionality (so that the user must use the controls) but I am having trouble doing so.

I've tried unbinding the click event (using jQuery) form the video/video player/poster and I've tried using addevent to add e.preventDefault() to the video but none of this seems to work.

Ps. I found a couple of posts saying you could comment out a line in the code, but this line doesn't exist in my version - maybe the plugin has been rewritten.

Answer 1

Check here

https://github.com/videojs/video.js/blob/master/docs/api/vjs.MediaTechController.md#removecontrolslisteners

So for example

v = videojs('scene04-video');
v.tech.removeControlsListeners();

Answer 2

You can try this. It helped me. Just add this to css file:

.video-js.vjs-playing .vjs-tech {
  pointer-events: none;
}

Answer 3

It would be helpful to know which version you are using. This works for me on 4.1 (latest api)

// Disable big-play-button
videojs.Player.prototype.options_.children.bigPlayButton = false;

// Override click handler on media object;
videojs.MediaTechController.prototype.onClick = function() {};

// Initialize video
var vid = videojs("video", {});

// Show controls (since in my browser it doesn't think it needs to inititally)
vid.controlBar.show();

UPDATE: I should clarify that the above only works using the dev.js API (not the prod/minified version). In the minified version, the MediaTechController's onClick function name isn't preserved, you can't reliably override it. In this case, you can try manually disconnecting the the HTML5 and Flash click events:

videojs.Html5.off('click');
videojs.Flash.off('click');

var vid = videojs("video", {}, function() {
  this.bigPlayButton.hide();
});

// Again - show the controlbar (optionally)
vid.controlBar.show();

Answer 4

Check this:

.vjs-tech {
  pointer-events: none;
}