How To Addeventlistener When Safari Exits Fullscreen

[obi_wan]

Hello everyone I was wondering if anyone can help me out with this problem. I have created custom video controls in HTML5/CSS and jQuery. Currently when you enter fullscreen I have to hide the custom controls because despite disabling controls the browser default controls still appear. Basically I am trying to to check when the browser exits full screen so that I can toggle back in my custom controls.

$('#fullscreen').click(function () { toggleFullScreen()});   /* toggle video full screen */function toggleFullScreen(){var vid = $('.jp-video-player').get(0);$('.jp-video-player').toggleClass("jp-video-player-fullscreen");$('.jp-video-controls').toggle(); if($(document).context.webkitIsFullScreen){$(document).context.webkitCancelFullScreen();}else{vid.webkitEnterFullscreen();}} 

The problem with my code above is that the toggleFullScreen is fired when you click on the fullscreen option. But because of safari's bug I have to disable the custom controls while in fullscreen so I have to figure out a way to toggle my custom controls when it leaves full screen.If anyone has any ideas or solutions that would be greatly appreciated.

[obi_wan]

I figured out a solution to my problem, basically what I did was added a eventListener on resize when the user enters fullscreen. If anyone has any better solutions I would love to go over them.

/* toggle video full screen */function toggleFullScreen(){var vid = $('.jp-video-player').get(0);if($(document).context.webkitIsFullScreen){  $(document).context.webkitCancelFullScreen();}else{  vid.webkitEnterFullscreen();  window.addEventListener("resize", this.disableCustomControlsOnWindowResize, false);}}function disableCustomControlsOnWindowResize(){$('.jp-video-controls').toggle();$('.jp-video-player').toggleClass("jp-video-player-fullscreen");}