Использование видео внутри карусели

Question

Существует не ответили тема, которая очень похожа на мою проблему здесь: 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.

Answer 1

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

Если вы используете автозапуск на карусели вы можете установить интервал для видео:

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