How to Disable play/pause on click of video element? Start play only on click of BigPlayButton.

[VinaykumarNM]

Hi,
I want to play/pause the video only when clicked on BigPlayButton not any other place of the video element.

I am referring libraries from -

<link href="https://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet"></link>
<script src="https://vjs.zencdn.net/4.12/video.js"></script>

Please let me know how i can achieve this.

[heff]

Why do you want only the big play button clickable? There's not a built in way to turn that off easily.

[ozanmakes]

It would be nice to have this in scenarios like rtmp streams where you might want the video to keep playing in case of accidental clicks but still want the player controls to function. I've found some stackoverflow questions about removing click handler of video.js Flash player but none of the workarounds I've tried worked with the latest minified versions.

[gkatsev]

Probably the best way is to add this to your css:

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

The downside is that this wont work in IE8.

[gkatsev]

Going to close this for now as it's unlikely we'll do anything in videojs about this.
However, we can continue the discussion here and if there is sufficient usecase, we can reopen to add such a feature beyond the workaround above.

[ozanmakes]

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

I think this is good enough for our use case, thanks @gkatsev.

[gkatsev]

No problem.

[Yulisa-Chang]

Hi ,I would like to know if there is a method to disable the default video onclick play/pause method so that i could do some other thing when the video is clicked? Thanks very much!

[djmakwana]

Is there any way in latest version 5.10.4 to disable play/pause when there is a click on the video? I tried following but it doesn't work.

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

[zcoding]

This is not a good solution for me because i just want the "mouse left click" to be disabled.

[kudlohlavec]

Little update to this thread:

For me

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

worked, however it doesnt work for Safari 11 and also none of the above mentioned css rules worked in Safari. Any ideas for Safari? (there is still option to attach play function into pause event but its not very nice solution)

[ryanmasuga]

Our use case is a client embedding a (Brightcove) video in a carousel (Slick) slide. We'd like the video to only start when clicking the Big Play Button (that's....whats it's for), because if they click anywhere on the video itself to drag and move to the next slide, the video starts, and continues playing offscreen (which is a separate issue).

[dkirilenko]

any updates?

[dkirilenko]

ok, I've found not elegant way to do this. I use videojs 7.5.5 . I've added additional code to videojs to handleTechClick_ function:

   _proto.handleTechClick_ = function handleTechClick_(event) {
      if (this.options_.disableVideoPlayPauseClick) {
        return
      }
     ...

Then init my player by:

videojs(videoEl, {
  disableVideoPlayPauseClick: true, // or don't use this option if you want use this feature
  ...

And it works for me

[lasersocks]

@dkirilenko Are you able to share any more information about this?

[chenxiaolong]

Another (hacky) workaround (in 7.7.3) is:

var player = videojs('foobar', ...);
player.player_.handleTechClick_ = function() {};

My use is case is just for a dumb personal site that plays an HLS live stream that fills up the entire page. I prefer accidental clicks to not pause the stream.

[dkirilenko]

@lasersocks Hmm :)

1. Download videojs 7.5.5
2. Open script and find _proto.handleTechClick_ = function handleTechClick_(event) { line
3. Add

if (this.options_.disableVideoPlayPauseClick) {
  return
}

4. After that you'll have possibility to add disableVideoPlayPauseClick to your player
   videojs(videoEl, { disableVideoPlayPauseClick: true })

I haven't idea what information you need more )

[dkirilenko]

@lasersocks see @chenxiaolong comment and try it, if you don't want to change script source.

In my case we use player in several places and as for me will be better just to pass additional option where we need

[dkirilenko]

@gkatsev I think we need to open task again :) So many people who wants to have such possibility without css hook

[CodyDunlap]

This is something that we need as well. Our use case is for syncing video playback across multiple browsers and only allowing a single user to control playback. We'd still like all instances to see progress and be able to select captions, etc. We're using this in angular via npm so manually editing the js file feels incredibly hacky and brittle. Currently, the only way to do this is for us to disable controls in videojs and provide our own playback controls.

[Rhovian]

Please please please reopen task

[Nyceane]

please reopen stack, i tried @dkirilenko's answer and it is not working..

[cabello]

My use case is a live streaming video integrated with AWS IVS and once the user clicks play, I would like to not pause the stream due to accidental clicks on the whole video. The suggested CSS change worked on Chrome, looking for alternatives for all browsers.

Thank you for making and sharing video.js 💜

[IliaIdakiev]

@cabello You can put an absolute positioned div on top of the video. Just make sure that you select a proper z-index.

[ziddey]

const options = {}
function ready() {
    this.off(this.tech_, 'mouseup', this.handleTechClick_)
}
const player = videojs('player', options, ready)

ref:

video.js/src/js/player.js

Line 1336 in ba47953

this.off(this.tech_, 'mouseup', this.handleTechClick_);

[oxwazz]

in my case, i try this;
player.el_.firstChild.style.pointerEvents = 'none'

thats worked fine