引导轮播视频答案

【问题标题】：Bootstrap carousel video引导轮播视频
【发布时间】：2019-11-16 16:25:18
【问题描述】：

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

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

$('#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>

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

【问题讨论】：

标签： javascript html css bootstrap-carousel

【解决方案1】：

您使用的是哪个版本的 Bootstrap？

Bootstrap 4 Carousel 事件允许您收听"end of a slide transition": slid.bs.carousel。

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

取决于视频 HTML 元素的生成方式（例如，如果您使用像 mediaelement.js 这样的库），这将取决于视频在轮播活动幻灯片中显示后如何“运行”。

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

另一种测试方式：目标是依赖autoplay attribute from the VIDEO html tag。

你可以让 DOM 包含一个描述视频的元素，但不是真正的 <VIDEO> 标签，然后，在它显示在活动幻灯片中之后，JS 将创建带有 @987654331 的真正的 <VIDEO> 标签这个描述符元素中的@属性，将在视频准备好后立即运行视频的角色委托给浏览器。

【讨论】：