点击图片打开自动播放的视频

Question

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

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

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

有人知道如何将其应用于所有幻灯片吗？

Here is a fiddle

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)
    })
  });

目前它会播放点击的视频，还有其他边缘情况需要处理，例如在escape key press 上停止视频或在关闭模式updated fiddle 上停止视频。如果对您有帮助，请将其标记为已接受的答案。