Jquery 视频上的控件不可见
我正在尝试向HTML5视频(全宽视频)添加控件,但我有一个问题,控件不可见。我正在使用这个示例:以下是我的代码:Jquery 视频上的控件不可见,jquery,html,css,bootstrap-4,Jquery,Html,Css,Bootstrap 4,我正在尝试向HTML5视频(全宽视频)添加控件,但我有一个问题,控件不可见。我正在使用这个示例:以下是我的代码: <div class="overlay"></div> <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" controls> <source src="https://storage.googleapis.com/cover
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" controls>
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-3">Video Header</h1>
<p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
</div>
</div>
</div>
有人能帮我吗?我做错了什么?为什么控件不可见?好的,我们需要解决两件事: 1) 如评论中所述,
.overlay
和标题的.container
都会阻止鼠标到达视频。我们可以通过添加属性指针事件来解决这个问题:none代码>,用于这两种类型。现在我们可以通过单击暂停/取消暂停视频
2) 定义视频大小的方法是设置minwidth:100%;最小高度:100%;宽度:自动;高度:自动代码>。在min-width
和min-height
之后调用width
和min-height
会覆盖它们(因此它们在这里什么也不做)。但问题是,这些控件实际上位于视频的底部,所以它们隐藏在
后面。我认为这是一种设计选择,但您可以设置高度:100%
,并在视频大小上设置黑色边框
我会继续寻找解决方案,比如重新定位视频控件,这样你就可以保持用视频填充整个屏幕的“覆盖”效果,但我认为第(1)步可能已经很有帮助了。覆盖层防止鼠标停留在视频上。@Taplar我有办法将控件放置在“覆盖层”上吗?
header {
position: relative;
background-color: black;
height: 75vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}