logo

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 SDK you can implement the Web SDK approach through Android 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.

github
Make sure to follow us on GitHub!
THEO-logo-white
twitter
facebook
linkedin
Copyright © 2022. All Rights Reserved.
Leuven
New York
Singapore
Barcelona