Plyr.js с Fancybox 3, несколько видео не инициализируются - PullRequest
Новая
       23

Plyr.js с Fancybox 3, несколько видео не инициализируются

0 голосов
/ 02 декабря 2018

Я пытаюсь реализовать несколько видео на одной странице, которые открываются в лайтбоксах.В настоящее время я использую Plyr.js, потому что он может создавать скины html5, vimeo и youtube, чтобы все они выглядели одинаково.Я также использую Fancybox для лайтбокса.

Когда я добавляю одно видео, кажется, что все работает.Однако в лайтбоксе несколько видео не инициализируются.Я также заметил, что если у меня есть видео на YouTube и я делаю его первым в списке, оно работает, но если оно следует за другим видео, оно не будет инициализировано.

Я использую класс .player вместо идентификатора, поскольку у меня несколько экземпляров.

Я знаю, что это проблема лайтбокса, потому что, если я уберу лайтбокс, все видео будут работать нормально.Поэтому, вероятно, мне нужно как-то отрегулировать, как лайтбокс инициализирует 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;
}

1 Ответ

0 голосов
/ 02 декабря 2018

Я знаю, что это проблема лайтбокса

Как это может быть проблема лайтбокса, если он работает отлично?Я повторяю - отлично!

несколько видео не отображаются в лайтбоксе

Опять неверное предположение.Если вы проверите элемент #video2, вы увидите, что он пуст.Зачем?Я не эксперт Plyr, но, возможно, он не будет инициализироваться в скрытые элементы.Попробуйте изменить beforeShow на afterShow обратный вызов - https://codepen.io/anon/pen/xQMmRV

...