Воспроизведение нескольких вставок Plyr Vimeo при наведении - PullRequest
Новая
       22

Воспроизведение нескольких вставок Plyr Vimeo при наведении

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

У меня есть несколько видео, встроенных в страницу с Plyr.js .Моя конечная цель - заставить каждое видео воспроизводиться при зависании и останавливаться, когда его нет.

Вот мой текущий код: 

const players = Array.from(document.querySelectorAll('#player')).map(p => new Plyr(p, {
  debug: true,
  volume: 0,
  controls: false,
  muted: true,
  fullscreen: { enabled: false },
  loop: { active: true },
  duration: 10
}));

$('#player').hover(playVideo, pauseVideo);
function playVideo(e){$(players, this).get(0).play();}
function pauseVideo(e){$(players, this).get(0).pause();}
.plyr{
  display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.7/plyr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="player" class="plyr__video-embed">
  <iframe src="https://player.vimeo.com/video/298038460?loop=1&byline=0&portrait=0&title=0&transparent=0" allowtransparency></iframe>
</div>
<div id="player" class="plyr__video-embed">
  <iframe src="https://player.vimeo.com/video/298038460?loop=1&byline=0&portrait=0&title=0&transparent=0" allowtransparency></iframe>
</div>

Приведенный выше код воспроизводит только первое видео при наведении, но не воспроизводит другие видео.

Если у кого-либо есть предложения, пожалуйста,не стесняйтесь поделиться.Любая помощь будет высоко оценена.

1 Ответ

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

Первая проблема - повторяющиеся значения id.Они должны быть уникальными.У вас уже есть класс (.plyr__video-embed) для этих элементов, поэтому используйте его вместо этого.

Ваши hover методы также пытаются найти игрока внутри элемента наведения, но это не поможетработать, потому что массив players содержит экземпляры плагина проигрывателя, а не узлы DOM.

Так что просто найдите index элемента наведения ( среди узлов проигрывателя ) и используйте его дляполучить доступ к соответствующему игроку. 

const playerNodes = $('.plyr__video-embed');
const players = playerNodes.map((i,p) => new Plyr(p, {
  debug: true,
  volume: 0,
  controls: false,
  muted: true,
  fullscreen: { enabled: false },
  loop: { active: true }
})).get();

playerNodes.hover(playVideo, pauseVideo);

function playVideo(e){players[playerNodes.index(this)].play();}
function pauseVideo(e){players[playerNodes.index(this)].pause();}
.plyr {
  display: inline-block;
}

.plyr__video-embed {
  border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.7/plyr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="plyr__video-embed">
  <iframe src="https://player.vimeo.com/video/298038460?loop=1&byline=0&portrait=0&title=0&transparent=0" allowtransparency></iframe>
</div>
<div class="plyr__video-embed">
  <iframe src="https://player.vimeo.com/video/298038460?loop=1&byline=0&portrait=0&title=0&transparent=0" allowtransparency></iframe>
</div>
...