隐藏的萌芽视频，嵌入在光滑滑块的 iframe 中，无法播放

Question

我希望我的 iframe 可以在光滑的滑块内拖动（左/右），为了实现这一点，我创建了一个覆盖 div（iframe-overlay），并使用 SproutVideo Javascript Player API，我绑定了一个事件，以单击叠加 div 时播放萌芽视频。

在我的光滑滑块中，我已将“slidesToShow”设置为3，当我单击它时，所有前3个iframe都会播放视频，我的问题是当我滑动到第四张和第n张幻灯片时，sproutvideo javascript播放器api，将不再工作了。

奇怪的是，绑定事件仍然被调用。我该如何解决这个问题，任何帮助将不胜感激。下面是我的代码。

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>

JS

  $('.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();
  });

下面是光滑滑块的屏幕截图

Answer 1

@luna 我认为，问题可能会发生，因为第四张和第 n 张幻灯片中的

iframe

可能未正确初始化。这个

SproutVideo player

需要为每个

iframe

进行初始化。

为了解决这个问题，我使用 Slick 滑块的

afterChange

事件来检测幻灯片何时发生变化，然后初始化当前幻灯片的

SproutVideo player

。

这是我尝试过的代码：

$('.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,
      }
    },
  ],
  // Add the following event handler to initialize SproutVideo player on slide change
  afterChange: function (slick, currentSlide) {
    const sproutId = $('.slick-current .iframe-overlay').attr('id');
    const player = new SV.Player({ videoId: sproutId });
    // Optionally, you may want to pause the player when changing slides
    // player.pause();
  }
});

$('.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();
});

希望对您的理解有所帮助。