CODEWITHSUNDEEP
mediaelement.js
Pablini
Pablini

Reputation: 53

MediaElement.js knowing when player goes fullscreen

i need check every time player goes fullscreen (or goes out from fullscreen), in other words, i need to listen to a custom event when the fullscreen method is triggered so i can do other things below.

Upvotes: 4

Views: 2504

Answers (3)

wheelmaker24
wheelmaker24

Reputation: 196

Actually, there is an "enteredfullscreen"event being dispatched when opening the fullscreen mode. However, this event is not being dispatched on the mediaElement, but on the player.

You can either attach the event listener after initiating 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 the player as the third argument):

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

Upvotes: 1

Nic
Nic

Reputation: 581

I tried to find a solution to this problem as well. My solution is to watch the isFullScreen property of the Mediaelement player object for changes.

Sample code:

...
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);
    }
});

Upvotes: 0

Ab_c
Ab_c

Reputation: 408

You'll need to add this bit of code before initializing 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();
}

Upvotes: 6

Related Questions