How to disable click to pause on Web

When you use the default UI of THEOplayer you can pause (and resume) the video by clicking anywhere on the video (except in the control bar). You can confirm this behavior at https://optiview.dolby.com/resources/demos/test-stream/.

You might be interested in disabling this behavior because your functional requirements don't allow you to pause the video.

You can disable this default UX behavior through CSS. We'll also discuss some related APIs.

The following CSS snippet disables pause to click by no longer catching the pointer event.

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

The following JavaScript snippet automatically resumes a video when someone tries to pause it by leveraging the pause event and the play() method.

player.addEventListener('pause', () => {
  player.play();
});

The following CSS snippet hides the play and pause button.

.video-js .vjs-play-control {
  display: none;
}

Interested in autoplay behavior? You might find "How to combat autoplay policies" an interesting read.