HTML5视频控件不工作 [英] HTML5 Video Controls do not work

问题描述

我做了这么多的研究，虽然有些问题/意见指向正确的方向，但我仍然站稳了脚。

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

该网站是 www。

下面的手续：

  div.video-background {height：100％;左：0; overflow：hidden; / * position：fixed; top：96px; * / vertical-align：top; width：1180px; / * z-索引：-1; * / padding-top：75px;位置：相对; margin：0 auto; margin-bottom：-70px;} div.video-background video {min-height：100％;最小宽度：100％; z-index：-2！important;} div.video-background> div {height：100％;左：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-backgroundid =video-background> < video loop =loopautoplay 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 =640height =360title =没有视频播放功能，请下载视频 < / video>< / div>  

解决方案

尝试使用：

  $（'。container.main.content'）。css -index'， -  1）
  

我在您的网页上测试过， b
$ b

这是因为div位于视频前面，因为控件不会显示 可点击。

然后，如果 remove 设置为 -1

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

希望它有帮助。

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.

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

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>

解决方案

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.

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

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.

Hope it helps.

这篇关于HTML5视频控件不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！