在 mouseenter 上加载 youtube 嵌入并静音答案

【问题标题】：Load youtube embed on mouseenter and mute在 mouseenter 上加载 youtube 嵌入并静音
【发布时间】：2015-11-12 17:31:03
【问题描述】：

当光标悬停在视频静音的 div 上时，我想加载嵌入的 youtube 视频。我让“鼠标输入”部分正常工作并且视频加载正确。但我无法让视频静音...请帮助！

我正在使用以下内容在 mouseenter 上加载嵌入的 youtube 视频，效果很好：

HTML

                <div class="featured desktop_only">
                <a href="#">
                    <div class="video_block shadow id1">
                        <img src="http://img.youtube.com/vi/mzygYS-vN1E/maxresdefault.jpg" />
                        <div class="info">
                            <span>Mary Chan</span>
                            <h2>In vestibulum elementum nisl quis maximus</h2>
                            <p>
                                Mei novum propriae ne, adhuc option ei nec. Cu vix accusam persequeris, etiam alienum sed cu. Ex qui eius oblique salutandi. Et vis adolescens cotidieque, ut veri vidit sed. Cu meis movet oblique pri, usu an malis iriure detracto.
                            </p>
                            <div class="spec">
                                Wednesday, July 28, 2015<br>
                                10:52 · 3,450 Views
                            </div>
                        </div>
                        <div class="preview"></div>
                    </div>
                </a>
            </div>

jQuery

        $('.video_block.id1').mouseenter(function() {
            $('.video_block.id1 .preview').html('<iframe id="ytplayer" type="text/html" src="https://www.youtube-nocookie.com/embed/scqYWrcwp_s?rel=0&autoplay=1&controls=0&showinfo=0&loop=1&iv_load_policy=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe>');
        });
        $('.video_block.id1').mouseleave(function() {
            $('.video_block.id1 .preview').html('');
        });

我已经尝试了关于以下问题的建议，但是一旦我将它与鼠标输入结合起来，它似乎就不起作用了：How do you mute an embedded Youtube player?

另外请注意，我计划让多个 div 悬停在每个 div 上并加载不同的视频，但每次只会播放一个。

提前致谢！

【问题讨论】：

标签： javascript jquery youtube

【解决方案1】：

我认为没有可以传递给 iframe 的 mute 参数。所以你必须使用来自 youtube 的iFrame api。

在您的 HTML 中，每个 preview div 都需要一个唯一的 id，也许使用视频 id：

<div class="preview" id="M7lc1UVf-VE" />

那么你的代码可能看起来像这样：

（我从 youtube 页面复制了这个并做了一些更改）

  // This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  //   This is called by the api once the API code downloads.
  var apiReady = false;
  function onYouTubeIframeAPIReady() {
    apiReady = true;
  }

  // creates a new ytPlayer or strts a video once one hovers over a preview element
  var players = {};
  $('.preview').mouseenter(function() {
      if (!apiReady) {
          return; // api not loaded yet since we can hover again just do nothing - maybe you want to do something cooler here
      }
      var videoId = $(this).attr('id');  

      if (players[videoId]) {
          // player is loaded just play
          players[videoId].playVideo();
      } else {
          // load player
          var player = new YT.Player(videoId, {
              height: '390',
              width:  '640',
              videoId: videoId,
              events: {
                'onReady': onPlayerReady,
              }
          });
          // store player by video id so we can use it later
          players[videoId] = player;
      }
  })

  $('.preview').mouseleave(function() {
      player.stop()
      // maybe also hide it here
  }

  // The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.mute();
    event.target.playVideo();
  }

【讨论】：

【解决方案2】：

添加

muted="muted"

到 iframe。

还要确保添加

"?wmode=opaque&autohide=1&autoplay=1&enablejsapi=1" 到您的 youtube 链接的末尾，而不是

"?rel=0&autoplay=1&controls=0&showinfo=0&loop=1&iv_load_policy=3&enablejsapi=1"

【讨论】：