Verwenden Video innerhalb Karussell

Question

Es ist ein nicht beantwortet Thema, das zu meinem Problem hier ist sehr ähnlich: HTML carousel with youtube videos stop roatation until end of video Deshalb habe ich neue Fragen an entschieden: Wie kann ich ein Video innerhalb von Bootstrap-Karussell in der Art und Weise die nächste Folie verwenden des Karussells wird erst nach dem Ende der Videodatei angezeigt? Grundsätzlich habe ich ein einfaches Karussell hier:

<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> 

Ich versuchte This fix für das Element mit der ID-Video zu verwenden:

#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; 
} 

Hier 23s ist die Dauer des Videos. Kann jemand diese Funktionalität implementieren? Auf diese Fragen zum Stackoverflow habe ich keine Antworten gefunden.

Answer 1

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

Wenn Sie Autoplay auf Karussell können Sie Intervall für Video eingestellt:

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