Fre*_*eph 5 javascript css video jquery 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;
}<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;
}
你有一个<img>内部的标签<video>标签,它需要被删除:
<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>标记中,因此您无需担心在空闲时无法显示静态图像.
小智 4
尝试使用：
$('.container.main.content').css('z-index',-1)
我在你的网页上测试了它并且有效。
这是因为 div 放置在视频前面，并且控件未显示 为可点击。
然后，如果您从 div 中删除-1对的设置z-index，视频将是可点击的。
这是一种解决方案，但正确的方法是在 css 文件中找到要设置 div 的 z-index 值的位置并在那里进行更改，而不是添加脚本块来修复可以在源中更改的内容。
希望能帮助到你。