CODEWITHSUNDEEP
javascriptvideo.js
Rgw3d
Rgw3d

Reputation: 61

Disable/enable click-to-play functionality

I am currently building a plugin for video.js that presents an overlay onto the screen at certain breakpoints. However, I am unable to click on any of the overlay without starting the video. I figure that I need to disable the click-to-play functionality on the player.

How should I go about disabling/enabling the click-to-play function of the video.js player?

function createBreak(breakpoint){

    player.pause();//pause the playback
    player.getChild('controlBar').hide();//hide the controlbar
    breakpoint.resolved = true;//

    var button = createEl('button',{});//adds button to video.js parent <div>
    button.innerHTML = "continue";//
    //THE PROBLEM: this button cannot be clicked (this is just a proof of concept)
    //    because clicking on it will restart the player
    //WHAT I NEED: a function that can disable the click-to-play 


}

This solution already exists, but it seems to work only on an older version of video.js

Upvotes: 0

Views: 1589

Answers (2)

mahyard
mahyard

Reputation: 1248

Because of the .vjs-big-play-button z-index value which is set to 2 you should give your overlay a bigger z-index. Then it will cover the play button too.

Upvotes: 0

Scruffy
Scruffy

Reputation: 580

What's going on here is a click on the overlay is propagating down to the video.js player. All you need to do is stop the propagation of the click event on the overlay. This will mean that you do not need to disable any video.js player functionality.

Mozilla Doc: Event.stopPropagation()

Event Bubble Cancellation Demo

What is likely to be applicable in your case is something along the lines of

var overlay = /* Get reference to overlay element here */
overlay.addEventListener('click', function(e) {
    functionBearingWhatEverCodeYouAlreadyHaveForOverlayClickEventIfAny();
    if(e.stopPropagation)      e.stopPropagation();
    if(e.cancelBubble != null) e.cancelBubble = true;
})

Which will stop the click event at the overlay and not let the player below be clicked on.

Upvotes: 1

Related Questions