如何解决悬停播放视频仅在第一个元素上起作用
当鼠标悬停在div上时,将播放视频。一切正常,但视频仅在第一个“播放器”上播放。我可以在每个播放器上看到缩略图,但它们不会开始播放。为什么会这样?
<?PHP
foreach($posts as $post)
{
$vimeoid = get_field('film_vimeo',$post,true);
if (empty($vimeoid))
{
$projektclass = "not-vimeo";
}
else
{
$projektclass = "vimeo";
}
//echo '<div id="hp-post"><a href="' . get_permalink($post->ID) . '">' . get_the_title($post->ID) . '</a></div>';
echo '<div class="'.$projektclass.'" style="position: relative;" id="hp-post">';
echo get_the_post_thumbnail( $post,'full' );
echo '<div id="'.$vimeoid.'"><iframe class="vimeoplayer" id="'.$vimeoid.'" style="position: absolute; z-index:-1;" src="https://player.vimeo.com/video/'.$vimeoid.'?title=0&byline=0&portrait=0&background=1&autoplay=0 width="100%" height="0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>';
}
echo '</div>';
}
?>
jQuery(document).ready(function() {
var vimeo = document.getElementsByClassName('vimeo')[0];
var player = new Vimeo.Player(vimeo);
vimeo.onmouSEOver = function() {
return player.play();
};
vimeo.onmouSEOut = function() {
return player.pause();
};
});
解决方法
问题是因为您仅检索元素集合中的第一项(即Tools -> Options -> Javascript/TypeScript -> Linting -> Enable ESLint
项)并将事件绑定到该元素。其他要素均不受影响。要解决此问题,您需要遍历它们。
我也建议为此使用[0]
而不是addEventListener()
事件属性。试试这个:
onX
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。