HTML5视频控件不能工作

I have done so much research and although some questions/comments do point me in the right direction, I continue to come to a stand still.

我做了这么多研究，尽管有些问题/评论确实指出了我的方向，但我仍然坚持立场。

Summary: HTML5 video shows controls but they can't be clicked. When you browse over them they disappear. You cannot click pause, play, mute, nothing. Please help me figure out what is happening.

简介:HTML5视频显示控件，但不能点击。当你浏览它们时，它们就消失了。你不能点击暂停，播放，静音，什么都没有。请帮我弄清楚发生了什么事。

The website is www.innovo-medical.com (in case you want to see what's happening)

网站是www.innovo-medical.com(如果你想知道发生了什么)

Formalities below:

手续如下:

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>

2 个解决方案

#1

Try using:

尝试使用:

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

I tested it in your webpage and worked.

我在你的网页上测试了一下，然后开始工作。

It is because the div is placed in front of the video and because that the controls are not being displayed clickable.

这是因为div被放置在视频的前面，而且控件不显示为可单击的。

Then if you remove set to -1 the z-index from the div, the video will be clickable.

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

This is one solution, but the right way is to find in the css file where you are setting the z-index value of the div and change it there, instead of adding a script block to fix something you could change in the source.

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

Hope it helps.

希望它可以帮助。

#2

Update

Although having the <img> tag inside the <video> tag is wrong, that's not your problem. You have a couple of elements overlapping your video control bar when the screen gets resized to be narrow. Instead of trying to cut the height of the offending elements and risk your layout's stability, just enter the following in your CSS:

尽管在

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

**OR**

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

---

You have an <img> tag inside the <video> tag, it needs to be removed:

在 <视频> 标签内有一个 标签，需要删除:

<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>

Besides the fact that it's invalid within a <video> tag it is inhibiting how it handles user interaction. The attribute [poster] is already in the <video> tag, so you don't need to worry about it not having a still image to display while it's idle.

除了在