javascript - HTML5 视频覆盖全屏控制

Question

当用户点击内置在默认 HTML5 视频播放器中的全屏按钮时，是否可以拦截和覆盖该功能？

背景 - 我有一个带有自定义叠加层(但不是自定义控件)的视频播放器，我仍然需要在全屏模式下显示该叠加层。我可以将我自己的按钮添加到屏幕上，使播放器全屏并仍然显示我的叠加层，但我想以某种方式将此功能绑定(bind)到播放器控件中的内置全屏按钮，这样我仍然可以使用这些控件并提供全屏支持。谢谢!

Answer 1

如果没有示例视频或音频文件，我无法对此进行测试，但以下应该允许您跟踪 fullscreenchange 事件和关联的 document.fullscreenElement跨浏览器(此时为 they are all behind vendor prefixes)。

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"/>