CODEWITHSUNDEEP
javascriptgoogle-chromehtml5-videoflowplayer
MoienGK
MoienGK

Reputation: 4654

How to find out if a video is being played in fullscreen mode in chrome

i am trying to find out when a video enters fullscreen mode and when exits, i have added following listerens :

@element.addEventListener("webkitbeginfullscreen", (e) ->
  @fullscreen = true
)

@element.addEventListener("webkitendfullscreen", (e) ->
  @fullscreen = true
)

@element.addEventListener("webkitfullscreenchange", (e) ->
  @fullscreen = ....
)

but non of my listeners catch any event when i switch to fullscreen. i have also tried following code with no luck(it is always false):

 videoElement.webkitDisplayingFullscreen

i am using google chrome version 45.0.2454.85 (64-bit) on ubuntu and the player above html5 video tag is flowplayer.

any help will be appreciated

Upvotes: 1

Views: 494

Answers (2)

michaPau
michaPau

Reputation: 1648

It's recommended to add the event handler to the document directly

adding the handler like this (pure js) works for chrome:

document.addEventListener("webkitfullscreenchange", function (event) {
   console.log("on webkitfullscreenchange");
   alert("on webkitfullscreenchange");
});

I created a quick code pen as a demo.

copepen example

But if your using the flowplayer you should probably use their API.

Upvotes: 1

Vikas Joshi
Vikas Joshi

Reputation: 96

You can use following...

jQuery(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', '#videoElementId', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

    // Now do something interesting
    alert('Event: ' + event);    
});

Upvotes: 2

Related Questions