javascript – HTML5视频控件不起作用

我做了很多研究,虽然有些问题/评论确实指出了我正确的方向,但我仍然保持不变.

摘要：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;
}

utoplay poster="{{ 'Ladyinblue.jpg' | asset_url }}" width="100%" controls="1">
            

最佳答案

尝试使用：

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

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

这是因为div放在视频前面,因为控件没有显示可点击.

然后,如果从div中删除设置为-1的z-index,则视频将是可点击的.

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

希望能帮助到你.