How to disable click to pause
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://demo.theoplayer.com/test-your-stream-with-statistics.
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 on both the Web SDK, iOS SDK and Android SDK. The next section will focus on the Web SDK specifically. We'll also discuss some related APIs. To achieve the same on the iOS SDK you can implement the Web SDK approach through iOS SDK customization. To achieve the same on the Android Legacy (4.12.x) SDK you can implement the Web SDK approach through Android Legacy (4.12.x) SDK customization.
SDKs
Web SDK | iOS SDK | Android SDK | tvOS SDK | Android TV SDK | Roku SDK | Chromecast SDK |
---|---|---|---|---|---|---|
Yes | Yes, but unverified through CSS/JavaScript injection | Yes, but unverified through CSS/JavaScript injection | N/A | N/A | N/A | N/A |
Web SDK
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.