CODEWITHSUNDEEP
javascriptjqueryhtmlvideo.js
Genzotto
Genzotto

Reputation: 1974

Rewriting fullscreen in videojs

I have a HTML5 player using Videojs. I want to rewrite the fullscreen button event to do a different thing.

I have tried rewriting the click event with JQuery and using preventDefault in the way shown below:

$('.ico.fullsc').on('click', function(event){
    event.preventDefault();
    event.stopPropagation();
    // My stuff
});

However, besides executing my code, it still does the fullscreen event. Is it possible to do?

Thank you very much in advance

Upvotes: 1

Views: 2336

Answers (1)

dtanders
dtanders

Reputation: 1845

Forgot that video.js doesn't use jQuery to set up events. My bad!

To do this the way you want to, you're going to have to get a little silly and replace the element with a clone of itself.

var fullscreenButton = $('.ico.fullsc').clone();
$('.ico.fullsc').replaceWith(fullscreenButton);
fullscreenButton.on('click', //etc

.clone() doesn't pick up event handlers but it does preserve attributes and contents, so you get a stylistically equivalent node but without the event handlers you didn't want.

It's also worth noting that you can go through video.js to add and remove UI elements with your own functionality: https://github.com/videojs/video.js/blob/stable/docs/index.md#customizing

Upvotes: 4

Related Questions