嵌入Slick Slider的SproutVideo视频播放异常问题求助

给Slick Slider内的iframe添加iframe-overlay遮罩层实现左右拖拽，同时通过SproutVideo JS播放器API绑定点击事件，点击遮罩层播放视频。设置slidesToShow: 3后，前3个视频点击可正常播放，但切换到第4个及以后的幻灯片时，API失效——控制台能打印出视频ID，但视频无法播放。

原代码 #

HTML #

<div class="parents-saying template-row row-margin-top">
    <div class="container">
        <div class="slider-grandparent-container element-margin-top">
            <div class="slider-parent-container">
                <div class="slider">
                    <?php foreach ($parents_saying['videos'] as $videos):?>
                        <slide>
                            <div class="iframe-container" style="position:relative;height:0;padding-bottom:177.94253938832253%">
                                <iframe class="sproutvideo-player thirteenth-row-iframe" src="https://videos.sproutvideo.com/embed/<?=$videos['sprout_id'];?>?playerTheme=dark&amp;playerColor=2f3437" style="position:absolute;width:100%;height:100%;left:0;top:0;border-radius:8px;" frameborder="0" allowfullscreen referrerpolicy="no-referrer-when-downgrade">
                                </iframe> 
                                <div class="iframe-overlay" id="<?=$videos['sprout_id'];?>"></div>
                            </div>
                        </slide>
                    <?php endforeach;?>
                </div>
        </div>
</div>

JavaScript #

$('.parents-saying .slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: true,
  dots: true,
  infinite: true,
  variableWidth: true,
  prevArrow:
    "<img class='a-left slider-arrow slick-prev' src='/wp-content/uploads/2023/08/home-left-arrow.webp'>",
  nextArrow:
    "<img class='a-right slider-arrow slick-next' src='/wp-content/uploads/2023/08/home-right-arrow.webp'>",
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        arrows: false,
      }
    },
  ],
});
$('.parents-saying .iframe-overlay').bind('click', function(e){
  const sproutId = $(this).attr('id');  
  console.log('SPROUT ID: ', sproutId);
  const player   = new SV.Player({videoId: sproutId});
  player.play();
});

问题原因 #

1. Player实例匹配错误：Slick开启infinite: true后会克隆幻灯片，克隆的iframe与原始iframe共享同一个视频ID，仅通过videoId创建Player实例时，API无法准确匹配当前需要播放的iframe。
2. 非初始幻灯片的iframe加载延迟：第4个及以后的幻灯片默认处于隐藏状态，对应的iframe可能未完成加载，导致初始化Player时无法识别播放器实例。

解决方法 #

修改后的JavaScript代码 #

$('.parents-saying .slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: true,
  dots: true,
  infinite: true,
  variableWidth: true,
  prevArrow:
    "<img class='a-left slider-arrow slick-prev' src='/wp-content/uploads/2023/08/home-left-arrow.webp'>",
  nextArrow:
    "<img class='a-right slider-arrow slick-next' src='/wp-content/uploads/2023/08/home-right-arrow.webp'>",
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        arrows: false,
      }
    },
  ],
});

// 改用事件委托绑定点击事件，兼容动态克隆的元素
$('.parents-saying .slider').on('click', '.iframe-overlay', function(e){
  const sproutId = $(this).attr('id');
  console.log('SPROUT ID: ', sproutId);
  // 获取当前遮罩层对应的iframe元素，避免ID重复导致的匹配错误
  const targetIframe = $(this).siblings('.sproutvideo-player')[0];
  // 通过element参数指定具体的iframe，确保Player实例匹配正确
  const player = new SV.Player({
    videoId: sproutId,
    element: targetIframe
  });
  player.play();
});

可选优化：处理克隆元素的重复ID问题 #

Slick克隆的元素会保留原始ID，违反HTML规范，可在初始化后给克隆元素添加标识，点击时跳过克隆的遮罩层：

// Slick初始化完成后标记克隆元素
$('.parents-saying .slider').on('init', function(){
  $(this).find('.slick-cloned .iframe-overlay').addClass('cloned-overlay');
});

// 修改点击事件，仅响应非克隆的遮罩层
$('.parents-saying .slider').on('click', '.iframe-overlay:not(.cloned-overlay)', function(e){
  const sproutId = $(this).attr('id');
  const targetIframe = $(this).siblings('.sproutvideo-player')[0];
  const player = new SV.Player({
    videoId: sproutId,
    element: targetIframe
  });
  player.play();
});

内容的提问来源于stack exchange，提问作者luna moonfang