Question

我只需要在悬停时播放YouTube视频

我这里有一个小提琴，无法让它起作用。

$(document).ready(function(){
  $(function() {

      var playersrc = jQuery(iframe).attr('src');

          $('div').hover(function(){
          $('iframe').attr('src',playersrc+'&autoplay=1');
      }, function(){
          $('iframe').attr('src',playersrc);
      });
  });       
});

https://jsfiddle.net/rhr5p0pg/2/

更新小提琴：https://jsfiddle.net/rhr5p0pg/4/

现在它全部播放，当你的鼠标离开时，它不会回到原始视频

Answer 1

您需要使用Iframe Youtube Api添加视频，请按照示例here进行操作。

初始化播放器并使用此Jquery代码：

//Hover play
$('iframe').on('mouseover',function(){
    player.playVideo();
});

//Blur Pause

$('iframe').on('mouseout',function(){
    player.playVideo();
});

Answer 2

您只存储第一个视频uri（src）。

这样的事情

$(document).ready(function(){
  var nowPlaying = "none";
      $('div').hover(function(){
          nowPlaying = $(this).find('iframe').attr('src');
          $(this).find('iframe').attr('src',nowPlaying+'&autoplay=1');
      }, function(){
          $(this).find('iframe').attr('src',nowPlaying);
      });

}）;

https://jsfiddle.net/rhr5p0pg/5/

Answer 3

使用Youtube视频API更容易。使用API，您可以更好地控制视频。

https://developers.google.com/youtube/iframe_api_reference

Answer 4

如果有人遇到悬停无法播放的问题，原因是自动播放政策已更改。您需要为视频设置静音。 https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

在悬停时播放YouTube视频

4 个答案: