SwiperJS - ReactJS 轮播混合视频和图像双重响起

Posted 2023-05-08

【中文标题】SwiperJS - ReactJS 轮播混合视频和图像双重响起

【英文标题】：SwiperJS - ReactJS carousel mixed with videos and images double sounded

【发布时间】：2021-12-24 20:53:21

【问题描述】：

我在包含混合幻灯片内容的NextJS 项目中使用SwiperJS。我正面临 react-youtube 组件的双重声音问题。

我的 swiper 配置使用 loop:true，但我发现这是导致双重声音的原因，因为所有幻灯片都是重复的。比当活动幻灯片是我设置他播放的视频时，但这也会导致重复的幻灯片播放。

如果我删除loop:true，它可以正常工作。但我需要在我的项目中维护loop:true。

---

我尝试过但没有任何效果的一个解决方案是找到 Swiper Carousel 包装器，然后获取一个 iframe 数组，我得到位置 1 即重复视频以试图阻止他播放

document.querySelector('[id^="Main_Carousel"]')
.getElementsByTagName('iframe')[1]
.contentWindow.postMessage(JSON.stringify( event: 'command', func: 'stopVideo' ), '*');

【参考方案1】：

根据文档 (https://swiperjs.com/react#swiper-slide-props)，SwiperSlide 包含一个 isDuplicate 属性。您可以在播放视频之前进行检查。