How to advance to the next slides when a video ends?
I'm working on something to be used on TV broadcast where it shows the camera, a menu and bottom line at the bottom of the screen. Everything works great until I have a video to be played and I need to advance to the next slide. When the video ends, it plays it again and the right menu advances to the last item and scrolls until it can no longer scroll. Also the bottom part advances again when the second video ends.
Here's what I'm talking about if that didn't make sense: https://codepen.io/openbayou/pen/dyYvYRN
When :video1: is done playing, it will play it again because there's a second video. The bottom third advances and when the second hidden video plays, the bottom advances again. The navigation menu on the right side goes all the way to the bottom and scrolls until it can't advanced anymore.
I think the problem is this, at least I think that's the problem:
$('.content-bottom div.tv-main div.webcam-left div.slider-wrap div.slide-wrap div.slider-slide-wrap.video-post.shown div.media-contain video#video-to-play').on('ended',function(){ $("#next-item").click(); });
When a video ends, it clicks a button. This is the function of that button:
- $("#next-item").on("click", function(){
event.preventDefault();
var $next = $('.slide-wrap .shown').next();
var $next2 = $('.slide-wrap2 .shown').next();
if ($next.length) {
$('.slider-wrap').animate({
scrollLeft: $next.position().left
}, 0);
}
if ($next2.length) {
$('.slider-wrap2').animate({
scrollLeft: $next2.position().left
}, 200);
}
var curr = $('.rundown-items .current').parent(); //find .current's parent
var $children = $('.rundown-items').children();
var firstcal = $children.length;
var actual = firstcal - 9;
$children.each(function (i) {
if (i < actual) {
$(this).addClass('scrollup')
}
});
if (curr.next().length > 0) {
$('.rundown-items').animate({scrollTop: '+=35px'}, 400);
curr.children('.current').contents().unwrap(); // remove .current
curr.next().wrapInner('<div class="current"></div>'); // add it to the next element
};
});
The button does multiple things: it removes the class .shown on .slide-wrap and .slide-wrap2 and applies .shown to the next item in the list and in the nav menu on the right side, it unwraps the current item and wraps the next item in the list and scrolls down 35px.
It works fine if there's one video but doesn't work if there's more than one video.
All help is greatly appreciated.