Video slider z progress bar

HTML
<ul class="bxslider">
<li>
<video controls>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
</li>
<li>
<video controls>
<source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>
</li>
</ul>

CSS
video {
display: block;
height: 400px;
margin: 0 auto;
}
.bx-wrapper .bx-pager {
display: flex;
}

.bx-wrapper .bx-pager-item {
margin: 0 5px;
flex: 1;
position: relative;
border-radius: 5px;
overflow: hidden;
}

.bx-wrapper .bx-pager.bx-default-pager a {
width: auto;
color: #fff;
text-indent: 0;
margin: 0;
border-radius: 0;
}

.progress {
height: 100%;
background-color: green;
position: absolute;
left: 0;
bottom: 0;
}

<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

JQUERY
$(document).ready(function () {
var $bxslider = $('.bxslider');
$bxslider.bxSlider({
onSliderLoad: function onSliderLoad(currentIndex) {
var video = $bxslider.find('video')[currentIndex + 1];
$(video).on("ended", function (e) {
$bxslider.goToNextSlide();
});

progressBar(currentIndex, video);
fullscreen(currentIndex);
},
onSlideBefore: function onSlideBefore() {
$bxslider.find('video').each(function () {
this.pause();
});
},
onSlideAfter: function onSlideAfter($slideElement, oldIndex, newIndex) {
var video = $slideElement.find('video')[0];
video.play();
$(video).on("ended", function (e) {
$bxslider.goToNextSlide();
});

progressBar(newIndex, video);
fullscreen(newIndex);
}
});
});

function fullscreen(index) {
$('video').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function (e) {
var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
var currentBar = $('.bx-pager-item a[data-slide-index=' + index + ']');
if (!state) {
currentBar.after('<div class="progress" data-slide-index=' + index + '></div>');
}
});
}

function progressBar(index, video) {
var currentBar = $('.bx-pager-item a[data-slide-index=' + index + ']');
$(video).on("timeupdate", function (e) {
if ($('.bx-pager-item').eq(index).find('.progress').length <= 0) {
currentBar.after('<div class="progress" data-slide-index=' + index + '></div>');
}

var progress = this.currentTime / this.duration * 100;
$('.progress[data-slide-index=' + index + ']').css('width', progress + '%');
});
}

Demo

Strona główna bloga