在hover上播放vimeo视频

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

<!DOCTYPE html> 
<html> 

<head> 
    <style> 
     #wrapper { 
      width: 85%; 
      margin-left: auto; 
      margin-right: auto; 
      padding-top: 50px; 
     } 

     #wrapper .card { 
      width: 25%; 
      float: left; 
      box-sizing: border-box; 
     } 
    </style> 
</head> 

<body> 
    <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> 
</body> 

</html>

来源

2016-02-22 codegeek

下面的代码工作s对我来说很完美

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

来源

2016-02-22 10:30:08 codegeek

而不是使用$。每次将通过每个ID循环，你应该使用$（ '＃ID）。在（' 鼠标悬停”，函数（）{} ）的;

请看下面的工作代码

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
\t \t #wrapper{ 
 
\t \t \t width:85%; 
 
\t \t \t margin-left:auto; 
 
\t \t \t margin-right:auto; 
 
\t \t \t padding-top:50px; 
 
\t \t } 
 
\t \t #wrapper .card{ 
 
\t \t \t width:25%; 
 
\t \t \t float:left; 
 
\t \t \t box-sizing:border-box; 
 
\t \t } 
 
    </style> 
 
</head> 
 
<body> 
 
\t 
 
<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').on('mouseover',function(){ 
 
\t  var player = $("#"+this.id); 
 
\t   froogaloop = $f(player[0].id); 
 

 
\t  player.mouseover(function(){ 
 
\t   froogaloop.api('play'); 
 
\t  }).mouseout(function(){ 
 
\t   froogaloop.api('pause'); 
 
\t  }); 
 
    }); 
 
    </script> 
 
</body> 
 
</html>

来源

2016-02-22 09:39:38

尝试这样的：

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

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

来源

2016-02-22 09:46:23 Sumanta736

这一个没有正常工作。当你将鼠标悬停在第二个或其他视频上时，它将开始第一个。 – Ernedar

在hover上播放vimeo视频

回答

相关问题