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悬停并为每个加载不同的视频，但每次只会播放一个。

提前致谢！

Answer 1

我认为您不能将mute参数传递给iframe。因此，您必须使用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();
  }

Answer 2

添加

muted="muted"

到iframe。

还要确保添加

＆＃34; WMODE =不透明＆安培;自动隐藏= 1＆安培;自动播放= 1＆安培; enablejsapi = 1＆＃34;到youtube链接的末尾而不是

＆＃34;相对= 0安培;自动播放= 1＆安培;对照= 0＆安培; showinfo = 0＆安培;循环= 1＆安培;加入iv_load_policy = 3及enablejsapi = 1＆＃34;

加载youtube嵌入鼠标中心并静音

2 个答案: