Question

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

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

Answer 1

我无法在没有示例视频或音频文件的情况下对此进行测试，但以下内容可让您跟踪fullscreenchange事件以及浏览器之间关联的document.fullscreenElement {{3此时）。

＆＃13;

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'
    }
}

＆＃13;

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

＆＃13;

HTML5视频覆盖全屏控制

1 个答案: