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.

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

回答2:

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

回答3:

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

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

回答4:

Check this:

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