带有 Fancybox 3 的 Plyr.js，多个视频未初始化

Question

我正在尝试在灯箱中打开的同一页面上实现多个视频。我目前正在使用 Plyr.js，因为它可以对 html5、vimeo 和 youtube 视频进行皮肤处理，使其看起来都一样。我也在使用 Fancybox 作为灯箱。

当我添加一个视频时，似乎一切正常。但是，多个视频似乎没有在灯箱中初始化。我还注意到，如果我有一个 youtube 视频并将其排在列表的首位，它可以工作，但如果它跟随另一个视频，它将不会初始化。

因为我有多个实例，所以我使用的是 .player 类而不是 id。

我知道这是灯箱问题，因为如果我移除灯箱，所有视频都可以正常工作。所以可能我需要以某种方式调整灯箱如何初始化 Plyr.js

这是我的代码：

示例 HTML

<div class="container">
  <p><a href="#video1" data-fancybox>HTML5 Video</a></p>
  <div id="video1" class="lightbox">
    <video controls crossorigin playsinline class="player">
    <!-- Video files -->
      <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4">
    </video>
  </div>
  <p><a href="#video2" data-fancybox>Youtube Video</a></p>
  <div id="video2" class="lightbox">
    <div class="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
  </div>
  <p><a href="#video3" data-fancybox>HTML5 Video</a></p>
  <div id="video3" class="lightbox">
    <video controls crossorigin playsinline class="player">
    <!-- Video files -->
      <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4">
    </video>
  </div>

</div>

示例 JS：

$("[data-fancybox]").fancybox({
  beforeShow: function() {
    const player = new Plyr('.player', {});
  }
});

示例 CSS

.container {
  width: 600px;
  margin: 0 auto;
}

.lightbox {
  display: none;
  width: 600px;
}

.fancybox-content {
  padding: 0;
}

Answer 1

我知道这是灯箱问题

如果灯箱工作正常，怎么可能是灯箱问题？我再说一遍 - 很好！

多个视频似乎没有在灯箱中初始化

再次，错误的假设。如果您检查#video2 元素，您会看到它是空的。为什么？我不是 Plyr 专家，但也许它不会初始化为隐藏元素。尝试将 beforeShow 更改为 afterShow 回调 - https://codepen.io/anon/pen/xQMmRV