jquery 隐藏的萌芽视频，嵌入在一个iframe在一个光滑的滑块不会发挥

2skhul33 于 5个月前发布在 jQuery

关注(0)|答案(2)|浏览(57)

我希望我的iframe可以在一个光滑的滑块内拖动（左/右），为了实现这一点，我创建了一个覆盖div（iframe-overlay），并使用SproutVideo Javascript Player API，我绑定了一个事件，当点击覆盖div时播放sprout视频。
在我光滑的滑块中，我将“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();
  });

型
下面是滑动滑块x1c 0d1x的屏幕截图

jquery

来源：https://stackoverflow.com/questions/77676434/hidden-sprout-videos-embbeded-in-a-iframe-in-a-slick-slider-wont-play

2条答案

按热度按时间

zlhcx6iw1#

@luna我想，可能是因为第4张和第n张幻灯片中的iframe初始化不正确，所以需要为每个iframe初始化此SproutVideo player。
为了解决这个问题，我使用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();
});

字符串
希望能对你的理解有所帮助。

赞(0）回复(0）举报 5个月前

kt06eoxx2#

@luna在我看来，这个问题可能发生在Slick Slider在variableWidth设置为ture或slidesToShow>= 1时克隆元素时。
因此，我尝试将单击事件附加到.slider-parent-container。
下面是修改后的JS代码：

$('.parents-saying .slider').slick({
  // Your existing settings...
});

// Use event delegation to handle clicks on .iframe-overlay
$('.parents-saying .slider-parent-container').on('click', '.iframe-overlay', function(e) {
  const sproutId = $(this).attr('id');  
  console.log('SPROUT ID: ', sproutId);
  const player = new SV.Player({ videoId: sproutId });
  player.play();
});

字符串

赞(0）回复(0）举报 5个月前

我来回答

jquery 隐藏的萌芽视频，嵌入在一个iframe在一个光滑的滑块不会发挥

2条答案

相关问题

热门标签

最新问答