MediaElement.js knows when a player enters full screen mode

Question

I need to check every time a player enters full-screen mode (or exits full-screen mode), in other words, I need to listen for a custom event when the full-screen method starts, so that I can do other things below.

Answer 1

You need to add this bit of code before initializing the MediaElement:

MediaElementPlayer.prototype.enterFullScreen_org = MediaElementPlayer.prototype.enterFullScreen; MediaElementPlayer.prototype.enterFullScreen = function() { // Your code here this.enterFullScreen_org(); } MediaElementPlayer.prototype.exitFullScreen_org = MediaElementPlayer.prototype.exitFullScreen; MediaElementPlayer.prototype.exitFullScreen = function() { // Your code here this.exitFullScreen_org(); } 

Answer 2

I tried to find a solution to this problem. My solution is to look at the isFullScreen property of the Player Mediaelement object for changes.

Code example:

 ... var mejsFullScreen; new MediaElementPlayer('#video', { pluginPath: 'lib/mediaelement/', flashName: 'flashmediaelement.swf', success: function(mediaElement, DOMElement, player) { mejsFullScreen= mediaElement.isFullScreen; setInterval(function() { if (mediaElement.isFullScreen != mejsFullScreen) { if (mediaElement.isFullScreen) { // do something on enter fullScreen mejsFullScreen = mediaElement.isFullScreen; } else { // do something on leave fullScreen mejsFullScreen = mediaElement.isFullScreen; } } }, 500); } }); 

Answer 3

In fact, when you open full-screen mode, the event "enteredfullscreen" . However, this event is not dispatched to mediaElement , but to player .

You can attach an event listener after starting the player:

 var myPlayer = new MediaElementPlayer("#video", options); myPlayer.container.addEventListener( "enteredfullscreen", // your callback function goes here false ); 

or use the success callback function (just add player as the third argument):

 var myPlayer = new MediaElementPlayer("#video", { // your options success: function(mediaElement, domObject, player) { player.container.addEventListener("enteredfullscreen", yourCallbackFunction) } });