javascript - 加载嵌入在mouseenter和静音上的youtube

Question

当光标悬停在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加载不同的视频，但是每次只能播放一个。

提前致谢!

Answer 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();
  }