滑动滑块在幻灯片更改时暂停youtube视频
滑动滑块在幻灯片更改时暂停youtube视频
提问于 2015-12-18 13:40:01
我已经使用Jquery Slick Slider创建了一个图像滑块，它也有youtube视频剪辑。当页面加载youtube视频设置为滑块的第一张幻灯片时，它将自动播放并开始播放。我想，当我将滑动框切换到下一张幻灯片时，youtube视频将停止播放。
我查看了其他堆栈溢出答案，但什么也找不到。
我试过了-
这是我的div结构-
<div id="mainSlider" class="box box-default">
<div class="sliderItem"><div class="playerID"><iframe width="100%" height="100%" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/VIDEO_ID?rel=0&autoplay=1&version=3&loop=1&playlist=VIDEO_ID&enablejsapi=1" id="player"></iframe></div></div>
<div class="sliderItem"><img src="" /></div>
<div class="sliderItem"><img src="" /></div>
<div class="sliderItem"><img src="" /></div>
</div>我用的是JS -
$("#mainSlider").slick({
dots: true,
autoplay: false,
autoplaySpeed: 7000,
speed: 500,
pauseOnHover: true,
responsive: [
{
breakpoint: 1025,
settings: {
arrows: true,
dots: false
}
}
]
})
.on('afterChange', function( e, slick, currentSlide ) {
$('.bumper').css('display', 'block');
playpausevideo($currentSlide.eq(e).data('youtubeplayer'), 'pause')
});Youtube JS -
function onYouTubeIframeAPIReady(){ // this function is called automatically when Youtube API is loaded (see: https://developers.google.com/youtube/iframe_api_reference)
jQuery(function($){ // when DOM has loaded
var $contentdivs = $('.sliderItem').find('div.playerID')
$contentdivs.each(function(i){ // loop through the content divs
var $contentdiv = $(this)
var $youtubeframe = $contentdiv.find('iframe[src*="youtube.com"]:eq(0)') // find Youtube iframe within DIV, if it exists
if ($youtubeframe.length == 1){
var player = new YT.Player($youtubeframe.get(0), { // instantiate a new Youtube API player on each Youtube iframe (its DOM object)
events: {
'onReady': function(e){e.target._donecheck=true} // indicate when video has done loading
}
})
$contentdiv.data("youtubeplayer", player) // store Youtube API player inside contentdiv object
}
})
})
}
function playpausevideo(player, action){
if (player && player._donecheck === true){
if (action == "play")
player.playVideo()
else if (action == "pause")
player.pauseVideo()
}
<script src="http://www.youtube.com/iframe_api"></script>这段代码不工作，youtube视频不会停止，当幻灯片改变时，它仍然在播放。
有什么建议吗？
谢谢
回答 3
Stack Overflow用户
发布于 2019-03-01 04:18:39
除了Sequence的答案之外，这将允许滑块在页面上有多个滑块的情况下仍然起作用。
$('.mainSlider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
var current = $(slick.$slides[currentSlide]);
current.html(current.html());
});Stack Overflow用户
发布于 2019-04-25 15:22:15
检查最简单的方法，当前幻灯片iframe src重置：
$('.mainSlider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
$('.slick-current iframe').attr('src', $('.slick-current iframe').attr('src'));
});Stack Overflow用户
发布于 2016-05-23 06:45:32
我将重置HTML内容。它会杀死IFrame并重建它。
var slider = $('.mainSlider').slick({
slidesToShow: 1,
autoplay: false,
autoplaySpeed: 5000
});
slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
var current = $('.slick-current');
current.html(current.html());
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34349155
复制相关文章
相似问题