HTML5 视频控件不起作用

Question

我做了很多研究，尽管一些问题/cmets 确实为我指明了正确的方向，但我仍然停滞不前。

总结：HTML5 视频显示控件但无法点击。当您浏览它们时，它们会消失。你不能点击暂停，播放，静音，什么都没有。请帮我弄清楚发生了什么。

网站是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;
}

<div class="video-background" id="video-background">
        <video loop="loop" autoplay poster="{{ 'Ladyinblue.jpg' | asset_url }}" width="100%" controls="1">
            <source src="{{ 'InnovoThermometer.mp4' | asset_url }}" type="video/mp4">
            <source src="{{ 'InnovoThermometer.webm' | asset_url }}" type="video/webm">
            <source src="{{ 'InnovoThermometer.ogg' | asset_url }}" type="video/ogg">
            <img alt="" src="{{ 'Ladyinblue.jpg' | asset_url }}" width="640" height="360" title="No video playback capabilities,   please download the video below">
        </video>
</div>

Answer 1

更新

虽然在<video> 标记中包含<img> 标记是错误的，但这不是你的问题。当屏幕变窄时，您有几个元素与视频控制栏重叠。与其尝试减少违规元素的高度并冒着布局稳定性的风险，只需在 CSS 中输入以下内容：

div.video-background {
    z-index: 99999;
}

**OR**

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

---

<video> 标签内有一个<img> 标签，需要将其移除：

<video loop="loop" autoplay="" poster="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/Ladyinblue.jpg?4954843373998890788" width="100%" controls="">
        <source src="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/InnovoThermometer.mp4?4954843373998890788" type="video/mp4">
        <source src="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/InnovoThermometer.webm?4954843373998890788" type="video/webm">
        <source src="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/InnovoThermometer.ogg?4954843373998890788" type="video/ogg">
        <!---REMOVE THIS TAG--<img alt="" src="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/Ladyinblue.jpg?4954843373998890788" width="640" height="360" title="No video playback capabilities, please download the video below">---REMOVE THIS TAG --->
    </video>

除了它在<video> 标签中无效之外，它还抑制了它处理用户交互的方式。 [poster] 属性已经在 <video> 标签中，因此您不必担心它在空闲时没有静止图像可显示。

Answer 2

尝试使用：

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

我在你的网页中测试过它并且工作正常。

这是因为 div 放在了视频的前面，并且控件没有被显示 可点击。

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

这是一种解决方案，但正确的方法是在您设置 div 的 z-index 值的 css 文件中找到并在其中更改它，而不是向 fix添加脚本块> 你可以在源代码中改变一些东西。

希望对你有帮助。