62
rated 0 times
[
64]
[
2]
/ answers: 1 / hits: 5096
/ 4 Years ago, sat, november 7, 2020, 12:00:00
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.
More From » html
