Swiper轮播切换暂停youbute视频

最新推荐文章于 2023-12-28 13:51:13 发布

原创最新推荐文章于 2023-12-28 13:51:13 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#youbube #javscript

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍使用Swiper插件实现视频切换时自动暂停前一个视频的方法，通过监听slideChangeTransitionEnd事件，发送消息给前一个视频iframe进行暂停操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 new swiper('.J-video-swiper',{
                navigation: {
                    nextEl: '.J-video-swiper .swiper-button-next',
                    prevEl: '.J-video-swiper .swiper-button-prev',
                },
                on: {
                    slideChangeTransitionEnd: function(){
                        var $previousVideoIframe = $('.J-video-swiper .swiper-slide').eq(this.previousIndex).find('.v-iframe-box iframe');
                        $previousVideoIframe[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
						//stopVideo:停止视频; pauseVideo:暂停; playVideo:播放视频		
					},
                }
			});