javascript - 具有自定义按钮的 HTML5 视频播放器无法在全屏模式下工作

标签 javascript html css html5-video

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

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

当播放器在最新的 chrome 和 firefox 浏览器中全屏显示时,自定义视频播放器控件(播放、暂停等)不起作用。请帮我解决这个问题。

最佳答案

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

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

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

关于javascript - 具有自定义按钮的 HTML5 视频播放器无法在全屏模式下工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49314522/

相关文章:

javascript - Angular -本地化-动态改变语言

javascript - 如何获取三个按钮中的两个按钮的类名称?

javascript - 背景图片的 CSS/JS 幻灯片

html - TD 高度未在 Firefox 中应用

css - 如何让这个渐变在 chrome 中工作?

CSS 对我来说似乎没有级联

javascript - Object.entries() 但对象而不是数组

html - 使用 CSS 强制元素中的单行文本填充宽度

php - 禁用 JavaScript 时显示/隐藏登录表单

jquery - 滚动中另一个元素中的偏置元素