我正在尝试将一些YouTube嵌入式视频放入FlexSlider Carousel / Slider中。我遇到的问题是如果幻灯片不在视图中,视频会停止。目前,如果您播放视频并选择新视频,则前一个视频将继续播放。
预期:在幻灯片更改时,停止视频。实际:在幻灯片更改时,视频会继续播放。
HTML:
<section class="videolist">
<div class="container">
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/xcJtL7QggTI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</li>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/a3ICNMQW7Ok" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</li>
<li> <iframe width="560" height="315" src="https://www.youtube.com/embed/S-thTTqefls" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </li>
<li> <iframe width="560" height="315" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li> <img src="https://quidsup.net/wallpaper/abstract/the-cube-1920x1080-wallpaper-5189.jpg" alt="This is the alt text of the video"> </li>
<li> <img src="https://www.setaswall.com/wp-content/uploads/2017/08/Spaceship-Background-20-1920x1080.jpg" alt="This is the alt text of the video"> </li>
<li> <img src="https://wallpapercave.com/wp/trlzN6b.jpg" alt="This is the alt text of the video"> </li>
<li> <img src="https://i.redd.it/vjcavsc1lcs11.jpg" alt="This is the alt text of the video"> </li>
</ul>
</div>
</div>
</section>
JS:
$(window).load(function() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
我在这里有一个codepen YouTube FlexSlider Carousel | Codepen
任何想法如何实现这一目标?
谢谢
在帮助下,它通过添加一些js来计算。
$(window).load(function() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider',
start: function() {
$('#carousel li').on('click', function(e){
stopVideos();
});
$('#carousel li').on('click', function(e){
stopVideos();
});
}
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel",
start: function() {
$('.flex-next').on('click', function(e){
stopVideos();
});
$('.flex-prev').on('click', function(e){
stopVideos();
});
}
});
});
function stopVideos() {
$('.iframe-vid').each(function() {
this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});
}