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

Question

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

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

我认为问题出在这里：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。如果它对您有帮助，请将此标记为已接受的答案。