Bootstrap 轮播视频

Question

我想要一个视频，当带有视频的幻灯片打开时，它会在轮播中自动播放。我只是在进入网站时设法自动播放它，即使它不在视频幻灯片上。

我在 bootstrap 文档中看到了一些关于

的内容

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

但我不知道该怎么做。我尝试了很多方法，但都没有用。

HTML

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <h1 class="slide1 display-1"><div class="circle">2019 FASHION TRENDS</div></h1>
          </div>
          <div class="carousel-item">
                <iframe src="https://www.youtube.com/embed/0qQHSFPilwE?start=12?rel=0&amp;autoplay=1&amp;controls=0&amp;showinfo=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2017/09/23/08/36/coffee-2778108__480.jpg" alt="Third slide">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

JS

$('.carousel').carousel({interval: 3000, pause: "hover"});

Answer 1

您使用的 Bootstrap 是哪个版本？

Bootstrap 4个轮播事件让你收听"end of a slide transition": slid.bs.carousel.

然后，您可以尝试检索当前显示的项目。

取决于您的视频 HTML 元素是如何制作的（例如，如果您使用像 mediaelement.js 这样的库），这将取决于如何 "run" 视频具有已显示在轮播活动幻灯片中。

如果您使用 mediaelement.js，您可以使用 the play() function 手动运行抛出幻灯片转换事件后的视频。

另一种测试方式：目标是靠autoplay attribute from the VIDEO html tag.

您可以让 DOM 包含描述视频的元素，而不是真正的 <VIDEO> 标签，然后，在活动幻灯片中显示后，JS 将创建真正的<VIDEO> 标记带有来自此描述符元素的 autoplay 属性，委派给浏览器运行在视频准备就绪后立即播放视频的角色。

Bootstrap 轮播视频

Bootstrap carousel video

html

javascript

css

bootstrap-carousel