时间戳

首页 > 解决方案 > HTML5 VIdeo 控制可见性/z-index

html - HTML5 VIdeo 控制可见性/z-index

问题描述

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

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;
}

查询：

$(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();
});

});

标签： htmlcssbootstrap-4

解决方案

您可以使用

    .carousel-indicators {
      pointer-events: none;
    }

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

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

推荐阅读