在悬停时播放 youtube 视频答案

【问题标题】：Play youtube video on hover在悬停时播放 youtube 视频
【发布时间】：2017-11-15 07:55:54
【问题描述】：

我只需要在悬停时播放 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/

现在它会播放所有内容，当你的鼠标离开时它不会回到原来的视频

【问题讨论】：

jquery 不见了！（点击Javascript设置）
抱歉，忘记了，修改了我的小提琴
这样吗？ jsfiddle.net/rhr5p0pg/3
你已经准备好 2 个 jquery
我让它在这里工作，但是当鼠标移出时它不会改变它的原始视频jsfiddle.net/rhr5p0pg/4

标签： jquery youtube

【解决方案1】：

您只存储第一个视频 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/

【讨论】：

顺便@less 怎么去掉视频下的空白？
我在 iframe css 上玩了一下，请参阅jsfiddle.net/rhr5p0pg/8

【解决方案2】：

您需要使用 Iframe Youtube Api 添加视频，参考示例here。

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

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

//Blur Pause

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：