Youtube API，屏蔽视频 (Iframe)

Question

项目 -> http://codepen.io/urketadic/full/YpLgBX/
问题 -> 选项 -> 矩阵模式（静音按钮 出现，但按下后不起作用）。
描述 -> 我在 HTML 中有 iframe，没有 src，它是隐藏的（宽度，高度=0）。
但是，如果启用矩阵模式，则此 iframe 的属性为 URL:

$('#iframe').attr("src","https://www.youtube.com/embed/videoseries?list=PLikZa7q0vpioApkXpyYxsrsng-nIsXBhv&autoplay=1&loop=1");

我还添加了静音按钮，当按下该按钮时假设更改为取消静音按钮并且还使上述播放列表中播放的视频静音：

var player;

function onYouTubeIframeAPIReady() {
   player = new YT.Player('ytplayer', { 
     height: '0', 
     width: '0', 
     playerVars: { 
       listType:'playlist', 
       list: 'https://www.youtube.com/embed/videoseries?list=PLikZa7q0vpioApkXpyYxsrsng-nIsXBhv' } } 
                          )};

 $('#unmute').on('click', function() {
    $("#unmute").hide();
    $("#mute").show();
    player.mute();
 });
 $('#mute').on('click', function() {
    $("#mute").hide();
    $("#unmute").show();
    player.unmute();
  });

静音按钮确实变成了取消静音按钮，但播放列表中的视频没有改变。
有谁知道我在这里做错了什么？

编辑：我目前拥有的是，我只是在单击时禁用 src attr，然后再将其返回。这并不完全静音，因为它会重置歌曲，但如果我找不到更好的东西，我就用这个吧。

Answer 1

请看一下http://codepen.io/anon/pen/oBgweY

请注意 HTML 部分中的此代码：

<div id="player"></div>
<script>
  // 2. 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);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '0',
      width: '0',
      playerVars: { 
   listType:'playlist', 
   list: 'PLikZa7q0vpioApkXpyYxsrsng-nIsXBhv' }

    });
  }
</script>

应该是吧

Answer 2

基于文档 - Changing the player volume:

player.mute():Void

Mutes the player.

player.unMute():Void

Unmutes the player.

这些是您在代码中使用过的函数。您可能需要仔细检查您的实施以查明您遇到的错误。

有很多教程可供您阅读 - How to Control YouTube's Video Player with JavaScript and youtube iframe api - easily create and interact with embedded youtube videos 代码实现：

$('#mute-toggle').on('click', function() {
var mute_toggle = $(this);

if(player.isMuted()){
player.unMute();
mute_toggle.text('volume_up');
}
else{
player.mute();
mute_toggle.text('volume_off');
}
});

此实现可能会帮助您进行控制，只需设置静音和取消静音的文本即可。

希望这对您有所帮助。

Youtube API，屏蔽视频 (Iframe)

Youtube API, Muting Video (Iframe)

iframe

youtube-api

mute