单击图像打开自动播放的视频

Question

我正在创建一个带有图像的滑块，当有人点击一个幻灯片时，用另一个带有视频的滑块打开一个模态窗口。

我想要实现的是:点击->播放视频。因此，如果点击图片的第三张幻灯片，打开并自动播放视频。

我认为问题就在这里：var iframe = $('#vimeo-player')[0];，因为这只会影响到第一张幻灯片。

有人知道如何把它应用到所有的幻灯片上吗？

这是一把小提琴

Answer 1

我查了一下你们的代码，发现了一些小错误。我想你忘了添加vimeo library了。我做了几次改变

$(document).on('ready', function() {
    $(".center").slick({
      dots: true,
      infinite: true,
      centerMode: true,
      slidesToShow: 1,
      slidesToScroll: 3,
      lazy: true
    });

    $(".play").click(function() {
      setTimeout(() => {
        var iframe = $('.active .vimeo-player')
        var player = new Vimeo.Player(iframe)
        player.play()
      },700)
    })
  });

目前，它将发挥点击的video，还有其他的边缘情况，你也需要处理，如停止视频在escape key press或关闭模式更新小提琴。如果这对你有帮助的话，把它标记为公认的答案。