HTML5video控件不起作用

我做了很多研究，虽然有些问题/评论确实指出了我正确的方向，但我仍然坚持不懈。

摘要：HTML5video显示控件但无法单击它们。 当你浏览它们时，它们会消失。 你无法点击暂停，播放，静音，什么都没有。 请帮我弄清楚发生了什么。

该网站是www.innovo-medical.com （如果你想看看发生了什么）

手续如下：

div.video-background { height: 100%; left: 0; overflow: hidden; /*position: fixed; top: 96px;*/ vertical-align: top; width: 1180px; /*z-index: -1; */ padding-top:75px; position:relative; margin: 0 auto; margin-bottom:-70px; } div.video-background video { min-height: 100%; min-width: 100%; z-index: -2 !important; } div.video-background > div { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 10; } div.video-background .circle-overlay { left: 50%; margin-left: -590px; position: absolute; top: 120px; } div.video-background .ui-video-background { display: none !important; } 

Answer 1

尝试使用：

 $('.container.main.content').css('z-index',-1) 

我在你的网页上测试过并且工作过。

这是因为div放在video前面，因为控件没有显示 可点击 。

然后，如果从div中删除设置为-1的z-index ，则video将是可点击的 。

这是一个解决方案，但正确的方法是在css文件中找到您设置div的z-index值并在其中更改它，而不是添加脚本块来修复您可以在源中更改的内容。

希望能帮助到你。

Answer 2

更新

虽然 标记内的标记是错误的，但这不是你的问题。 当屏幕调整为狭窄时，您的video控制栏会有几个元素重叠。 不要试图削减有问题的元素的高度并冒着布局稳定性的风险，只需在CSS中输入以下内容：

 div.video-background { z-index: 99999; } **OR** div.video-background video { z-index: 1 !important; } 

---

您在 标记内有一个标记，需要删除它：

除了它在标签内无效之外，它还禁止它处理用户交互的方式。 属性[poster]已经在标签中，因此您无需担心在空闲时无法显示静止图像。