Bootstrap Carousel - Autoplay video on active slide

Question

I've been trying to make an interactive documentary using Bootstrap Carousel. For this, I want the video on the active slide to autoplay. I've read that autoplay isn't possible unless the video is muted, but I don't mind it if you only had to click a volume button once for everything to then autoplay but I haven't figured out how to do this. On Chrome, nothing autoplays and you have to manually play every video. When using Safari, once the user has interacted with the page before, the video's do autoplay, but the problem is that they all autoplay at the same time, even the video's on the slides that aren't active (with sound). Does anyone know a solution?

My HTML:

<div id="myCarousel" class="carousel slide" data-interval="false">
<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="carousel-item active"> 
        <video controls autoplay loop muted class="myvid" id="player">
            <source src="assets/img/intro.mp4" type="video/mp4">
            </video>
    </div>

    <div class="carousel-item">
         <video controls autoplay class="myvid" id="player2">
            <source src="assets/img/Placeholder Video.mp4" type="video/mp4">
            </video>
 </div>

  </div>

  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Vorige</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Volgende</span>
  </a>
</div>

My Javascript:

  
}).on('slide.bs.carousel', function () {
  document.getElementById('player').pause();
});

/* SLIDE ON CLICK */ 

$('.carousel-indicators > li > a').click(function() {

    // grab href, remove pound sign, convert to number
    var item = Number($(this).attr('href').substring(1));

    // slide to number -1 (account for zero indexing)
    $('#myCarousel').carousel(item - 1);

    // remove current active class
    $('.carousel-indicators .active').removeClass('active');

    // add active class to just clicked on item
    $(this).parent().addClass('active');

    // don't follow the link
    return false;
});

/* AUTOPLAY NAV HIGHLIGHT */

// bind 'slid' function
$('#myCarousel').bind('slid', function() {

    // remove active class
    $('.carousel-indicators .active').removeClass('active');

    // get index of currently active item
    var idx = $('#myCarousel .item.active').index();

    // select currently active item and add active class
    $('.carousel-indicators li:eq(' + idx + ')').addClass('active');

});

Thanks in advance.

Answer 1

You can use Bootstrap 4 Carousel Events this way:

let allVids = $("#myCarousel").find('.carousel-item');

allVids.each(function(index, el) {
  if (index !== 0) {
    $(this).find('video')[0].pause();
  }
});

$("#myCarousel").on('slide.bs.carousel', function(ev) {
  let slides = $(this).find('.carousel-item');
  let pvid = slides[ev.from].querySelectorAll('video')[0];
  let vid = slides[ev.to].querySelectorAll('video')[0];
  let isPlaying = vid.currentTime > 0 && vid.readyState > 2;

  vid.play();

  if (isPlaying) {
    pvid.pause();
  }
});

#myCarousel {
  max-width: 1200px;
  margin: 0 auto;
}

.carousel-control-next, .carousel-control-prev {
    width: 9% !important;
}

.carousel-inner {
  background: #111;
}

.carousel-indicators {
  bottom: -13px !important;
}

.carousel-item {
  padding-bottom: 25px;
}

video {
  width: 100%;
}

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">


<div id="myCarousel" class="carousel slide" data-interval="false">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <video controls autoplay loop muted class="myvid" id="player">
            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
            </video>
    </div>

    <div class="carousel-item">
      <video controls autoplay class="myvid" id="player2">
            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
            </video>
    </div>

    <div class="carousel-item">
      <video controls autoplay class="myvid" id="player2">
            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
            </video>
    </div>
  </div>

  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Vorige</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Volgende</span>
  </a>
</div>