HTML5 video override fullscreen control

Question

Is it possible to intercept and override the functionality when a user clicks on the fullscreen button built into the default HTML5 video player?

Background - I have a video player with a custom overlay (not custom controls, though) and I need to still display that overlay in fullscreen mode. I can add my own button to the screen that makes the player fullscreen and still displays my overlay, but I would like to somehow bind this functionality to the built-in fullscreen button in the player controls so I can still use those controls and provide fullscreen support. Thanks!

see similar post [http://stackoverflow.com/questions/27415536/html5-fullscreen-video-onclick-event](http://stackoverflow.com/questions/27415536/html5-fullscreen-video-onclick-event) — Ishey4, Dec 12 '16 at 18:47
[fullscreenchange event](https://developer.mozilla.org/en-US/docs/Web/Events/fullscreenchange) maybe. — 001, Dec 12 '16 at 18:51

score -1 · Answer 1 · answered Dec 12 '16 at 19:18

I wasn't able to test this without an example video or audio file, but the following should allow you to track the fullscreenchange event and the associated document.fullscreenElement across browsers (they are all behind vendor prefixes at this point).

var fullscreen = getFullscreenProps(),
    video = document.querySelector('video')

console.log(fullscreen)

document.addEventListener(fullscreen.fullscreenchange, function (event) {
  var isVideoFullscreen = document[fullscreen.fullscreenElement] === video
  console.log(isVideoFullscreen)
})


function getFullscreenProps () {
    var keys = 'fullscreenElement mozFullScreenElement msFullscreenElement webkitFullscreenElement'.split(' '),
        prefixes = ' moz ms webkit'.split(' ')
    for (var i = 0; i < keys.length; i++) {
        if (keys[i] in document) {
            return {
              fullscreenElement: keys[i],
              fullscreenchange: prefixes[i] + 'fullscreenchange'
            }
        }
    }
    return {
        fullscreenElement: keys[0],
        fullscreenchange: 'fullscreenchange'
    }
}

<video src="http://example.com/video.mp4" type="video/mp4" width="100" height="100"/>

HTML5 video override fullscreen control

1 Answers1