CODEWITHSUNDEEP
javascriptjqueryhtmlwordpressflowplayer
Elliott Bowles
Elliott Bowles

Reputation: 398

Flowplayer HTML5 Fullscreen on Play

I've got Flowplayer up and running on a WordPress installation, and am trying to change the behavior of the player to enter fullscreen mode upon the user hitting the play button.

I have the following JavaScript in my footer:

flowplayer(function (api, root) {
    api.bind("resume", function(e, api, video) {

        api.fullscreen();

    });
});

But, alas, the player will not toggle into fullscreen mode. I know there is a limitation with fullscreen that it can only be called when the user does an action, but isn't the 'resume' event a user-created action?

I have confirmed the code is sound by testing its behavior with the mute function, which worked as expected.

Upvotes: 3

Views: 3243

Answers (2)

Elliott Bowles
Elliott Bowles

Reputation: 398

I was able to implement a solution to this that I thought I would share in case people were looking in the future. 

flowplayer(function (api, root) {

  api.bind("load", function () {
     jQuery('div.flowplayer').addClass("is-fullscreen");

  }).bind("fullscreen-exit", function(e, api) {
     jQuery('div.flowplayer').addClass("is-fullscreen");

 });; 
});

Essentially I start the player in a windowed fullscreen mode (similar to how a Netflix video begins playing in the browser). The user then can choose to make the video 'true' fullscreen. This worked great, but I noticed when the user exited 'true' fullscreen, FP didn't revert to windowed fullscreen, which is why I re-add the 'is-fullscreen' class on the fullscreen-exit event.

Hope this helps in the future!

Upvotes: 3

Colin Bacon
Colin Bacon

Reputation: 15609

It is not possible from events such as resume for the reason you have stated. In the flowplayer api docs under the fullscreen method it states:

Many browsers allow this method to work only from events which are triggered by user interaction, like "click", and not for example from player events like "ready" which happen at moments undetermined by the user.

resume is a player event and will therefore not work.

Perhaps allowing the user to choose whether to go full screen or not is the better option.

Upvotes: 1

Related Questions