HTML5 视频控件不起作用

HTML5 Video Controls do not work

本文关键字：不起作用 控件 视频 HTML5      更新时间：2023-09-26

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

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

更新

尽管将<img>标签放在<video>标签内是错误的，但这不是您的问题。当屏幕大小调整为窄时，有几个元素重叠视频控制栏。与其试图削减违规元素的高度并冒着布局稳定性的风险，只需在 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> 标记中，因此您无需担心它在空闲时没有静止图像可显示。

尝试使用：

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

我在您的网页中对其进行了测试并工作了。

这是因为div 放置在视频的前面，并且控件无法显示可单击。

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

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

希望对您有所帮助。

相关文章：