Flowplayer HTML5 Fullscreen on Play

Question

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.

Answer 1

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!

Answer 2

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.