HTML5 VIdeo 控制可见性/z-index

Question

你好，我有一个引导的轮播，里面有一个视频
我无法解决的主要问题是由于轮播指示器而无法单击视频控件。
我试图为它们添加一些边距和填充，它适用于乞讨和视频的结尾(两者重合，但在搜索栏的中间，我不能无缘无故地点击(。
如果我没有解释我，请告诉我。
我无法添加任何代码段，但您可以在我的网站上看到我试图解释的内容：这里

.HTML：

<div id="carousel-home" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carousel-home" data-slide-to="0" class="active"></li>
<li data-target="#carousel-home" data-slide-to="1" id="slide_1"></li>
<li data-target="#carousel-home" data-slide-to="2" id="slide_2"></li>
<li data-target="#carousel-home" data-slide-to="3" id="slide_3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<video id="myvideo" class="crop" poster="imgs/video_thumb.jpg"  preload="auto" playsinline controls>
<source src="vid/video_2019.mp4" type="video/mp4"  onclick="this.play();">
</video>
</div>
<div class="carousel-item">
<img class="d-block w-100 mx-auto" src="imgs/slider/1.png" alt="First slide">
<div class="carousel-caption">
<h2 class="title" style="text-shadow: 1px 1px black">First</h2>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 mx-auto" src="imgs/slider/2.png" alt="Second slide">
<div class="carousel-caption">
<h2 class="title" style="text-shadow: 1px 1px black">Second</h2>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 mx-auto" src="imgs/slider/3.png" alt="Third slide">
<div class="carousel-caption">
<h2 class="title" style="text-shadow: 1px 1px black">Third</h2>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-home" role="button" data-slide="prev" id="carousel_l">
<i class="fa fa-chevron-left"></i>
<span class="sr-only">Back</span>
</a>
<a class="carousel-control-next" href="#carousel-home" role="button" data-slide="next" id="carousel_r">
<i class="fa fa-chevron-right"></i>
<span class="sr-only">Next</span>
</a>
</div>

.CSS：

.carousel-indicators li {
margin-bottom: 2rem;
padding-bottom: 1rem;
padding-top: 1rem;
border-radius: 100%;
}
.carousel-item img {
object-fit: cover
}
.carousel-item {
overflow:hidden;
}

JQuery：

$(window).ready(function() {
$('#carousel_l').on("click", function() {
$('#myvideo').get(0).pause();
});
$('#carousel_r').on("click", function () {
$('#myvideo').get(0).pause();
});
$('#slide_1').on("click", function () {
$('#myvideo').get(0).pause();
});
$('#slide_2').on("click", function () {
$('#myvideo').get(0).pause();
});
$('#slide_3').on("click", function () {
$('#myvideo').get(0).pause();
});

}(;

Answer 1

您可以使用

.carousel-indicators {
pointer-events: none;
}
.carousel-indicators > li {
pointer-events: auto;
}

以删除轮播指示器的交互性。