如何解决播放自动播放 vimeo 视频时暂停 Slick Slider 不起作用
我使用 iframe vimeo 视频和图像创建了 Slick Slide 横幅。我尝试在播放自动播放视频时暂停当前滑块.. 我尝试使用“beforeChange”事件进行当前滑块暂停,仅播放当前滑块视频而保持滑块视频必须暂停.. 我不明白为什么不工作/我缺少什么。
$(function() {
let $slideshow = $('.slick_slider');
$slideshow.slick({
initialSlide: 0,autoplay: true,autoplaySpeed: ImagePauses[0],dots: false,arrows: false,fade: true
});
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
$slideshow.on('beforeChange',function(event,slick,currentSlide){
// pause old video (better performance)
if(!currentSlide) {
player.pause();
currentSlide.pause();
} else {
currentSlide.play();
player.pause();
}
});
});
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet"/>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slick_slider">
<div class="vimeo-wrapper">
<iframe src="http://player.vimeo.com/video/565964510?api=1&byline=0&portrait=0&title=0&background=1&muted=1&autoplay=1&autopause=1&id=565964510" allow=autoplay frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div>
<img src="assets/img/img-0.jpg" class="entity-img" alt="Image"/>
</div>
<div class="vimeo-wrapper">
<iframe src="https://player.vimeo.com/video/565972134?api=1&byline=0&portrait=0&title=0&background=1&muted=1&autoplay=1&autopause=1&id=565972134" allow=autoplay frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div>
<img src="assets/img/img-6.jpg" class="entity-img" alt="Image"/>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。