HTML5视频覆盖全屏控制-Java 学习之路

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

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

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

回复于 2024-05-09T03:31:18+08:00

HTML5视频覆盖全屏控制

1 回答

相关问题