CODEWITHSUNDEEP
htmlhtml5-videovideo.js
Joe Czucha
Joe Czucha

Reputation: 4295

Video.js - preventing click-to-play functionality

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.

Upvotes: 7

Views: 10611

Answers (4)

Arsen Khachaturyan
Arsen Khachaturyan

Reputation: 8320

Check this:

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

Upvotes: 3

Optio
Optio

Reputation: 7632

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

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

Upvotes: 4

commonpike
commonpike

Reputation: 11185

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();

Upvotes: 4

Cameron Tangney
Cameron Tangney

Reputation: 678

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();

Upvotes: 3

Related Questions