在悬停时播放多个Plyr Vimeo嵌入 [英] Play multiple Plyr Vimeo embeds on hover

问题描述

我在 Plyr.js 页面上嵌入了多个视频。我的最终目标是让每个视频在悬停时播放，并在没有悬停时停止播放。

I have multiple videos embedded on a page with Plyr.js. My end goal is to get each video to play on hover and stop when there is no hover.

这是我当前的代码：

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>

上面的代码只播放悬停时的第一个视频但是不播放其他视频。

The code above plays only the first video on hover but does not play other videos.

如果有人有任何建议，请随时分享。任何帮助都将受到高度赞赏。

If anyone has any suggestions please feel free to share. Any help will be highly appreciated.

推荐答案

第一个问题是重复的 id 价值观。他们需要独一无二。你已经为这些元素提供了一个类（ .plyr__video-embed ），所以请改用它。

First issue is the duplicate id values. They need to be unique. You already have a class (.plyr__video-embed) for those elements so use that instead.

你的悬停方法也试图找到悬停元素中的玩家，但这不起作用，因为玩家 array保存播放器插件的实例，而不是DOM节点。

Your hover methods also try to find the player inside the hovered element, but that will not work because players array holds instances of the player plugin and not DOM nodes.

所以只需找到悬停元素的索引 （在玩家节点中）并使用它来访问相关玩家。

So just find the index of the hovered element (amongst the player nodes) and use it to access the relevant player.

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>

这篇关于在悬停时播放多个Plyr Vimeo嵌入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！