Pause/Play video in Slick slider - html5-video

Question

I have a Slick slider with some images and some html5 videos.
I have managed to make the Prev/Next arrows work: if I click on the arrows the slider goes to the next video (it plays automatically) and the previous one is paused.
Now I've added a button to pause/play the current video, but I can't find a way to make it work properly. The button works only the first time a video is played. If I change slide and go back to the same video I am not able to pause it anymore.
$('.sliderVideo').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
dots: true,
autoplay: true,
autoplaySpeed: 1000,
adaptiveHeight: true,
pauseOnHover:false,
cssEase: 'linear'});
$('.sliderVideo').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$("video").each(function(){
$(this).get(0).pause();
});
});
$('.sliderVideo').on('afterChange', function(event, slick, currentSlide) {
var vid = $(slick.$slides[currentSlide]).find('video');
if (vid.length > 0) {
$('.sliderVideo').slick('slickPause');
$(vid).get(0).play();
var MyPlayButton = $(slick.$slides[currentSlide]).find('.play-button');
//var MyPlayButton = $('.play-button');
MyPlayButton.on('click', function () {
if ($(vid).get(0).paused) {
$(vid).get(0).play();
console.log('play');
} else {
$(vid).get(0).pause();
console.log('paused');
}
return false;
});
}
});
$('video').on('ended',function(){
$('.sliderVideo').slick('slickPlay');});
I would really appreciate your help.
I've created a fiddle https://jsfiddle.net/8ds3Lrxm/22/

Answer 1

OK, fixed this way:
var MyPlayButton = null;
$('.sliderVideo').on('beforeChange', function(event, slick, currentSlide, nextSlide){
if (null !== MyPlayButton) {
MyPlayButton.off('click');
}
$("video").each(function(){
$(this).get(0).pause();
});
});

Answer 2

A very simple way (keeping it simple is best)
this way we reset the video whenever we start playing it...
$('#slider_id').on('beforeChange', function(event, slick, currentSlide, nextSlide){
// pause old video (better performance)
var old_vid = $('#slider_id .slide:eq('+currentSlide+')').find('video');
$(old_vid).get(0).pause();
// play current video from start
var cur_vid = $('#slider_id .slide:eq('+nextSlide+')').find('video');
$(cur_vid).get(0).currentTime = 0;
$(cur_vid).get(0).play();
});

Answer 3

$('.video_banner_slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
console.log(currentSlide);
$("video").each(function(){
$(this).get(0).pause();
});
});