Pavel Z. Pavel Z. - 7 months ago 68
jQuery Question

Use video inside carousel

There is a not answered topic that is very similar to my problem here:
HTML carousel with youtube videos stop roatation until end of video
That's why I decided to ask new question:
How can I use video inside of Bootstrap Carousel in the way the next slide of the carousel will be shown only after the video file ends?
Basically, I have a simple carousel here:

<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>
<div class="item">
<img src="assets/img/slide-2.png" alt="Slide 2">

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


I tried to use This fix for the item with 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;

Here, 23s is the duration of the video. Does anyone know how to implement this functionality? I did not find any answers on this questions on stackoverflow.
Thank you for your time.

$('#video').on('ended', function () {

If you use autoplay on carousel you can set interval for video:

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