我在带有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>
上面的代码只播放悬停时的第一个视频,但不播放其他视频。
如果有人有任何建议,请随时分享。任何帮助将不胜感激。