I'm setting up a slick slider and for now the option to click to the next slider (simply by pressing on the next video) will play the next video. The question is how can I stop the video (in case that the user didn't finish to watch the previous one) when the user is already on the new video.
I thought maybe it has to do something with wistia.com api, it might help for this problem. (I'm hosting my videos there).
My html:
<div class="container-fluid">
<div class="col-12 mx-auto text-center">
<div class="center slider">
<div>
<div class="video">
<script src="https://fast.wistia.com/embed/medias/hmtobx4al7.jsonp" async></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper"
style="height:100%;left:0;position:absolute;top:0;width:100%;">
<div class="wistia_embed wistia_async_hmtobx4al7 videoFoam=true"
style="height:100%;position:relative;width:100%">
<div class="wistia_swatch"
style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
<img src="https://fast.wistia.com/embed/medias/hmtobx4al7/swatch"
style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
alt="" onload="this.parentNode.style.opacity=1;" /></div>
</div>
</div>
</div>
</div>
<br>
<span class="mentor-name">Anthony Morrison</span> <br>
<span class="mentor-quote">“Igor has done a phenomenal job as a JV partner. He has a higher
conversion rate than any JV that promoted our webinar.”</span>
</div>
<div>
<div class="video">
<script src="https://fast.wistia.com/embed/medias/55ilr5u699.jsonp" async></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper"
style="height:100%;left:0;position:absolute;top:0;width:100%;">
<div class="wistia_embed wistia_async_55ilr5u699 videoFoam=true"
style="height:100%;position:relative;width:100%">
<div class="wistia_swatch"
style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
<img src="https://fast.wistia.com/embed/medias/55ilr5u699/swatch"
style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
alt="" onload="this.parentNode.style.opacity=1;" /></div>
</div>
</div>
</div>
</div>
<br>
<span class="mentor-name">michael cheney</span> <br>
<span class="mentor-quote">“Igor's a super big player. He doesn't make a big song and dance
about it, but trust me, if you want big numbers - talk to Igor!”</span>
</div>
<div>
<div class="video">
<script src="https://fast.wistia.com/embed/medias/r1ru4nt171.jsonp" async></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper"
style="height:100%;left:0;position:absolute;top:0;width:100%;">
<div class="wistia_embed wistia_async_r1ru4nt171 videoFoam=true"
style="height:100%;position:relative;width:100%">
<div class="wistia_swatch"
style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
<img src="https://fast.wistia.com/embed/medias/r1ru4nt171/swatch"
style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
alt="" onload="this.parentNode.style.opacity=1;" /></div>
</div>
</div>
</div>
</div>
<br>
<span class="mentor-name">Ron Douglas</span> <br>
<span class="mentor-quote">“Cease every opportunity to work with Igor. He's one of the top
guys in list building.”</span>
</div>
<div>
<div class="video">
<script src="https://fast.wistia.com/embed/medias/n1u4w38ibb.jsonp" async></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper"
style="height:100%;left:0;position:absolute;top:0;width:100%;">
<div class="wistia_embed wistia_async_n1u4w38ibb videoFoam=true"
style="height:100%;position:relative;width:100%">
<div class="wistia_swatch"
style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
<img src="https://fast.wistia.com/embed/medias/n1u4w38ibb/swatch"
style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
alt="" onload="this.parentNode.style.opacity=1;" /></div>
</div>
</div>
</div>
</div>
<br>
<span class="mentor-name">John Crestani</span> <br>
<span class="mentor-quote">“If you are not working with Igor Kheifets, you are seriously
missing out.”</span>
</div>
<div>
<div class="video">
<script src="https://fast.wistia.com/embed/medias/dkbrixea1u.jsonp" async></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper"
style="height:100%;left:0;position:absolute;top:0;width:100%;">
<div class="wistia_embed wistia_async_dkbrixea1u videoFoam=true"
style="height:100%;position:relative;width:100%">
<div class="wistia_swatch"
style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
<img src="https://fast.wistia.com/embed/medias/dkbrixea1u/swatch"
style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
alt="" onload="this.parentNode.style.opacity=1;" /></div>
</div>
</div>
</div>
</div>
<br>
<span class="mentor-name">Matt Bacak</span> <br>
<span class="mentor-quote">“Igor has quickly risen to become one of the greatest list
builders I've ever met.”</span>
</div>
<div>
<div class="video">
<script src="https://fast.wistia.com/embed/medias/i2cnznqtvz.jsonp" async></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper"
style="height:100%;left:0;position:absolute;top:0;width:100%;">
<div class="wistia_embed wistia_async_i2cnznqtvz videoFoam=true"
style="height:100%;position:relative;width:100%">
<div class="wistia_swatch"
style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
<img src="https://fast.wistia.com/embed/medias/i2cnznqtvz/swatch"
style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
alt="" onload="this.parentNode.style.opacity=1;" /></div>
</div>
</div>
</div>
</div>
<br>
<span class="mentor-name">Dean Holland</span> <br>
<span class="mentor-quote">“I recommend all my clients and customers to work with Igor. Igor
goes above and beyond for his customers.”</span>
</div>
</div>
</div>
</div>
My slick settings:
// Testimonial Slider
$('.slider').slick({
infinite: true,
centerMode: true,
centerPadding: '12%',
slidesToShow: 3,
slidesToScroll: 1,
arrows: false,
speed: 500,
autoplay: true,
autoplaySpeed: 8000,
focusOnSelect: true,
waitForAnimate: true,
responsive: [{
breakpoint: 992,
settings: {
slidesToShow: 1
}
}]
});
$('.slider').click(function () {
$(".slider").slick('slickNext').focus();
$(".video").trigger('focus')
});
$('.video').click(function () {
$(".video").trigger('focus')
});
I eventually figured it out myself I used the wistia API website, it is recommended to everyone to go through it if you want to get your results.
Thank you Mr Florian de Ville for the support even though I didn't have to use your code eventually.
So my code is:
window._wq = window._wq || [];
_wq.push({
id: "_all",
onReady: function (video) {
video.bind("play", function () {
$('.slider').slick('slickPause');
var allVideos = Wistia.api.all();
for (var i = 0; i < allVideos.length; i++) {
if (allVideos[i].hashedId() !== video.hashedId()) {
allVideos[i].pause();
}
}
});
video.bind("pause", function () {
$('.slider').slick('slickPlay');
});
}
});
What does it do?: prevents from all the videos on the website to play on the same time, whenever a user presses on "play" [on the video player] the slider will stop from moving and whenever a user is pressing on "pause" the slider will continue to run.