在轮播中使用视频答案

【问题标题】：Use video inside carousel在轮播中使用视频
【发布时间】：2016-07-01 14:42:37
【问题描述】：

这里有一个与我的问题非常相似的未回答主题： HTML carousel with youtube videos stop roatation until end of video 这就是为什么我决定提出新问题：如何在 Bootstrap Carousel 中使用视频，因为只有在视频文件结束后才会显示轮播的下一张幻灯片？基本上，我这里有一个简单的轮播：

<div class="slider carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active" id="video">
      <video id="video" muted autoplay="autoplay" loop="loop" preload="auto">
        <source src="assets/video/welcome.mp4"></source>
      </video>
    </div>
    <div class="item">
      <img src="assets/img/slide-2.png" alt="Slide 2">
    </div>
  </div>
  <div class="slider-layout"></div>
  <div class="slider-caption">
    <button type="submit" class="btn btn-default btn-orange">Signup now</button>
    <button type="login" class="btn btn-default btn-transperent">Login</button>
  </div>
</div>

我尝试使用This 修复带有 ID 视频的项目：

#video{
  -webkit-transition: 23s ease-in-out left !important;
     -moz-transition: 23s ease-in-out left;
       -o-transition: 23s ease-in-out left;
          transition: 23s ease-in-out left !important;
}

这里，23s 是视频的时长。有谁知道如何实现这个功能？我在stackoverflow上没有找到关于这个问题的任何答案。

【问题讨论】：

标签： javascript jquery css twitter-bootstrap video

【解决方案1】：

$('#video').on('ended', function () {
  $('.carousel').carousel('next');
});

如果您在轮播中使用自动播放，您可以设置视频的间隔：

<div class="item active" muted autoplay="autoplay" loop="loop" preload="auto" id="video" data-interval="999999999">

【讨论】：

你是绝对正确的。只是需要去掉循环属性，因为视频会无限播放。