带有自定义按钮的 HTML5 视频播放器无法在全屏模式下工作答案

【问题标题】：HTML 5 Video player with custom button's are not working in Full Screen带有自定义按钮的 HTML5 视频播放器无法在全屏模式下工作
【发布时间】：2018-03-16 06:32:26
【问题描述】：

我正在创建一个带有自定义控件的 HTML 5 视频播放器。我参考了以下网址。

http://iandevlin.github.io/mdn/video-player/

当播放器在最新的 chrome 和 firefox 浏览器中全屏显示时，自定义视频播放器控件（播放、暂停等）无法正常工作。请帮我解决这个问题。

【问题讨论】：

什么全屏模式？这些自定义控件中的那个？它适用于我最新的 FF 和 chrome。视频中的原图？这很正常：您需要从#videoContainer 请求全屏模式。如果它让您感到困扰，某些用户可能可以访问此 FS 模式，您可以听取<video> 的全屏更改，阻止它，并改为触发您的自定义模式。
全屏上的按钮仍保留在 video#video 下，因此您尝试单击视频布局而不是单击按钮。使用 z-index 达到此目标
@JoelBonetR 感谢您的帮助。它拯救了我的一天
=) 让我添加一个答案以结束问题

标签： javascript html css html5-video

【解决方案1】：

全屏按钮仍保留在 video#video 下，因此您尝试单击视频布局而不是单击按钮。使用 z-index 达到此目的：

video#video{
    z-index: 1;
}
ul#video-controls{
    z-index: 9999;
}

这会将按钮移到前面，使其能够被点击。

【讨论】：