html - 有没有办法设置引导视频轮播间隔以在第一个视频自动播放完成时播放下一个视频？

Question

我有一个 bootstrap 4 视频轮播，我想让下一个视频在第一个视频播放完毕后自动滑入帧中。我尝试设置数据间隔以匹配视频，但第二个视频更长，因此无法解决我的问题。有什么解决办法吗？

将数据间隔与第一个视频匹配

    <div class="container">
    <div class="row justify-content-center">
    <div class="col-sm-12 col-md-8 pb-3">
      <div class="video-width-testimonials bg-white shadow-sm rounded p-2 mx-lg-auto">
       <!-- Video Block -->
       <div id="youTubeVideoPlayer" class="video-player">

          <!-- Video Iframe -->
          <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
              <div class="carousel-inner">
                <div class="carousel-item active">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe width="500" height="315" src="https://www.youtube.com/embed/*****"  class="vid-one" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen-two></iframe>
                        </div>
                </div>
                <div class="carousel-item">
                    <div class="embed-responsive embed-responsive-16by9">
                       <iframe width="560" height="315" src="https://www.youtube.com/embed/*****" class="vid-one" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen-two></iframe>
                        </div>
                </div>
              </div>
              <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          <!-- End Video Iframe -->
        </div>
        <!-- End Video Block -->
  </div>
  </div>
</div>
</div>

auto slide to next video when video finished

标签： htmltwitter-bootstrap