Video.js - preventing playable functionality

Question

I am using video.js to embed video in an HTML page. It should be used as an ipad-only application, so I believe that it uses its own HTML5 player. I am trying to disable the click-to-play function (so the user must use the controls), but I am having problems with this.

I tried to disable the click event (using jQuery) from the video / video player / poster, and I tried to use addevent to add e.preventDefault() to the video, but none of this works.

Ps. I found a couple of posts saying that you can comment on a line in the code, but this line does not exist in my version - the plugin may have 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

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 (and not with prod / minified). In the shortened version, the name of the MediaTechController onClick function is not saved; you cannot reliably redefine it. In this case, you can try manually disabling the HTML5 and Flash 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 3

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

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