Question

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

我在引导文档中看到了有关

的内容

$('#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 Carousel事件可让您收听"end of a slide transition": slid.bs.carousel。

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

取决于视频HTML元素的产生方式（例如，如果您使用mediaelement.js之类的库），它将取决于视频在轮播活动幻灯片中显示后如何“运行”。< / p>

如果使用mediaelement.js，则可以在投影片转换事件发生后使用the play() function手动运行视频。

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

您可以使DOM包含描述视频的元素，但不包含真实的<VIDEO>标签，然后，在活动幻灯片中将其显示后，JS会创建真实的<VIDEO>标签带有来自此描述符元素的autoplay属性，可以在视频准备就绪后将其委派给浏览器。

引导轮播视频

1 个答案: