在鼠标悬停时播放 vimeo 视频答案

【问题标题】：Play vimeo videos on mouse hover在鼠标悬停时播放 vimeo 视频
【发布时间】：2016-06-03 15:38:06
【问题描述】：

我在一个页面中有四个 vimeo iframe。我想在鼠标悬停时播放视频并在鼠标悬停时暂停视频。以下代码有效，但仅适用于最后一个视频。如何修改它以使其适用于所有视频？

#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&amp;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&amp;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&amp;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&amp;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>

【问题讨论】：

标签： jquery iframe vimeo froogaloop

【解决方案1】：

而不是使用 $.each 循环遍历每个 id 你应该使用 $('#id).on('mouseover',function(){ });

请看下面的工作代码

$('.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');
  });
});

#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&amp;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&amp;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&amp;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&amp;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>

【讨论】：

【解决方案2】：

以下代码非常适合我

$('.product-card-vimeo-video').mouseover(function(){
var player = $("#" + this.id);
        froogaloop = $f(player[0].id);
        froogaloop.api('play');
        player.mouseout(function(){
            froogaloop.api('pause');
        });
});

【讨论】：

【解决方案3】：

试试这样：

 $('.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');
});
});

检查笔：http://codepen.io/anon/pen/wMLmVQ

【讨论】：

这个功能不正常。当您将鼠标悬停在第二个或第一个视频上时，它将启动第一个。