我在页面中有四个vimeo iframe。我想在鼠标悬停时播放视频并在mouseout上暂停视频。以下代码有效,但仅适用于最后一个视频。如何修改它以使其适用于所有视频?
#wrapper {
width: 85%;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
}
#wrapper .card {
width: 25%;
float: left;
box-sizing: border-box;
}
<div id="wrapper">
<div class="card">
<iframe class="product-card-media" id="player1" type="text/html" width="100%" src="http://player.vimeo.com/video/126309467?api=1&player_id=player1"></iframe>
</div>
<div class="card">
<iframe class="product-card-media" id="player2" type="text/html" width="100%" src="http://player.vimeo.com/video/126309467?api=1&player_id=player2"></iframe>
</div>
<div class="card">
<iframe class="product-card-media" id="player3" type="text/html" width="100%" src="http://player.vimeo.com/video/126309467?api=1&player_id=player3"></iframe>
</div>
<div class="card">
<iframe class="product-card-media" id="player4" type="text/html" width="100%" src="http://player.vimeo.com/video/126309467?api=1&player_id=player4"></iframe>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
$('.product-card-media').each(function() {
var player = $("#" + this.id);
froogaloop = $f(player[0].id);
player.mouseover(function() {
froogaloop.api('play');
}).mouseout(function() {
froogaloop.api('pause');
});
});
</script>
答案 0 :(得分:1)
以下代码对我来说非常适合
$('.product-card-vimeo-video').mouseover(function(){
var player = $("#" + this.id);
froogaloop = $f(player[0].id);
froogaloop.api('play');
player.mouseout(function(){
froogaloop.api('pause');
});
});
答案 1 :(得分:0)
您应该使用 $(&#39; #id).on(&#39; mouseover&#39;,function(){而不是使用$ .each来循环遍历每个ID });
请参阅以下工作代码
$('.product-card-media').on('mouseover',function(){
var player = $("#"+this.id);
froogaloop = $f(player[0].id);
player.mouseover(function(){
froogaloop.api('play');
}).mouseout(function(){
froogaloop.api('pause');
});
});
&#13;
#wrapper{
width:85%;
margin-left:auto;
margin-right:auto;
padding-top:50px;
}
#wrapper .card{
width:25%;
float:left;
box-sizing:border-box;
}
&#13;
<div id="wrapper">
<div class="card">
<iframe class="product-card-media" id="player1" type="text/html" width="100%" src="http://player.vimeo.com/video/126309467?api=1&player_id=player1" ></iframe>
</div>
<div class="card">
<iframe class="product-card-media" id="player2" type="text/html" width="100%" src="http://player.vimeo.com/video/126309467?api=1&player_id=player2" ></iframe>
</div>
<div class="card">
<iframe class="product-card-media" id="player3" type="text/html" width="100%" src="http://player.vimeo.com/video/126309467?api=1&player_id=player3" ></iframe>
</div>
<div class="card">
<iframe class="product-card-media" id="player4" type="text/html" width="100%" src="http://player.vimeo.com/video/126309467?api=1&player_id=player4" ></iframe>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
&#13;
答案 2 :(得分:0)
试试这样:
$('.product-card-media').each(function(){
var player = $(".product-card-media");
froogaloop = $f(player[0].id);
player.mouseover(function(){
froogaloop.api('play');
}).mouseout(function(){
froogaloop.api('pause');
});
});