多iframe嵌入YouTube视频无需点击响应悬停播放/暂停问题求助

问题出在现代浏览器的自动播放策略：非静音的媒体内容必须经过用户主动交互（如点击页面）才能触发播放，这是浏览器为防止自动播放打扰用户的限制。要实现无需点击即可响应悬停事件，必须让视频满足浏览器的自动播放条件——即默认静音。

以下是修改后的完整代码，解决了该问题：

<html>
<!-- Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Youtube player API -->
<script src="https://www.youtube.com/iframe_api"></script>

<body>
  <!-- embeded player1 -->
  <div id="player0" name="vp" onmouseover="Mouseover(this)" onmouseout="Mouseout(this)" videoId="K-0Mp075kPQ">
    <iframe title="YouTube video player" scrolling="no" frameborder="0" allowfullscreen></iframe>
  </div>

  <p></p>
  <!-- embeded player2 -->
  <div id="player1" name="vp" onmouseover="Mouseover(this)" onmouseout="Mouseout(this)" videoId="fg4CehuZORA">
    <iframe title="YouTube video player" scrolling="no" frameborder="0" allowfullscreen></iframe>
  </div>

  <script>
    jQuery(document).ready(initYoutubePlayer);

    function initYoutubePlayer() {
      jQuery('div[name="vp"]').each(function(){
        let vid = jQuery(this).attr('videoId');
        let player = new YT.Player(this, {
          height: '250',
          width: '640',
          enablejsapi: 1,
          videoId: vid,
          playerVars: {
            'controls': 0, 
            'rel': 0,
            'playlist': vid,
            'loop': 1,
            'modestbranding': 1,
            'mute': 1, // 关键：设置默认静音，满足浏览器自动播放条件
            'autoplay': 0 // 页面加载后默认暂停
          },
          events: {
            'onReady': function(event) {
              event.target.pauseVideo(); // 确保视频加载完成后处于暂停状态
            }
          }
        });
      })
    }

    function Mouseover(el) {
      let yt_object = YT.get(el.id)
      yt_object.playVideo();
      // 若需要在用户点击后开启声音，可添加判断：比如记录是否有过用户交互，之后再取消静音
      // if (hasUserInteraction) yt_object.unMute();
    }

    function Mouseout(el) {
      let yt_object = YT.get(el.id)
      yt_object.pauseVideo();
    }
  </script>
</body>
</html>

关键修改说明 #

1. 移除重复API脚本：原代码重复引入了player_api，保留一个iframe_api即可
2. 添加静音参数：playerVars里的'mute': 1是核心，让视频静音后，浏览器允许无需用户交互即可触发播放
3. 初始化暂停设置：通过autoplay:0和onReady事件确保视频加载后默认暂停，符合悬停才播放的需求
4. 优化函数声明：将箭头函数改为标准函数声明，提升兼容性

如果需要在悬停时开启声音，由于浏览器限制，必须先让用户有一次主动交互（比如点击页面任意位置），之后才能通过代码取消静音。可以添加一个全局变量记录用户交互状态，在交互后再执行yt_object.unMute()。

内容的提问来源于stack exchange，提问作者Sundeep Rajput