自定义静音/取消静音按钮Youtube API

Question

前言：

我想说我已经尽力避免让这个问题成为一个重复的问题，即我自己搜索谷歌，阅读了很多其他类似的问题，等等。我发现很多真正有用的东西让我在这个特定的情况下我有代码展示，所以希望我的最后一个问题是清楚和可回答的。

我有一个简单的网站，使用纯HTML和Bootstrap为CSS构建。主页上有一个嵌入式全屏Youtube视频，展示了一些歌手。因此需要视频上的声音，但我还想要一个静音按钮而不提供youtube视频的所有控件（暂停/播放，质量，字幕等）。

我已经使用在其开发人员页面上找到的Youtube API在JSFiddle中成功完成了此操作。 http://jsfiddle.net/Bvance/8bzxp9c2/

问题：

问题是，使用我网站上工作的JsFiddle完全相同的代码，我得到错误Uncaught TypeError: player.isMuted is not a function at HTMLDivElement.<anonymous> (main.js:154)

这是我的HTML：

<div class="container-fluid video-background" id="home">
    <iframe id="myPlayer" width="100%" height="100%" src="https://www.youtube.com/embed/videoseries?list=PLr3L2qYLOPjj8caQDOfdhuvHSWQdrUAjq&
    autoplay=1
    &disablekb=1
    &enablejsapi=1
    &loop=1
    &controls=0
    &mute=0
    &index=1
    " frameborder="0" allowfullscreen></iframe>

    <a href="#welcome" title="Welcome" id="welcome-down">
        <span class="glyphicon glyphicon-chevron-down"></span>
    </a>

    <div id="muteButton">
</div>

这是我的Javascript：

//Necessary to laod the Youtube API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {

  console.log(player);

  player = new YT.Player('myPlayer', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange,
      'onError': onPlayerError
    }
  }); 
}

function onPlayerError(event) {
  alert(event.data);
}

function onPlayerReady() {
  alert("hey Im ready");
  //do whatever you want here. Like, player.playVideo();

}

function onPlayerStateChange() {
  alert("my state changed");

}
//Setting the event listener to the mute button
document.getElementById("muteButton").addEventListener('click', function (event) {
      console.log(player);

      if(player.isMuted())
      {
        player.unMute();
      } else {
        player.mute();
      }
});

这个javascript只是整个文件的片段，但它是文件中的第一件事。我使用了一些JQuery并在这部分代码下面有一个$(document).ready{。我明白将API调用放在那里是行不通的（我已经尝试过了）。

我尝试过的：

在我的调试中，我在调用player之前和之后将YT.Player()对象打印到控制台，并且对象正在返回。虽然由于某种原因，它无法访问我网站上的任何功能。但是，在检查JSFiddle代码时，它会在打印到控制台时显示所有内容。

您可以在使用JSFiddle Screenshot of console for printed 'player' object时将其与控制台中的打印播放器对象进行比较

我已经尝试将document.getElementById("muteButton").addEventListener移动到不同的地方，包括onYouTubeIframeAPIReady()内部无济于事。我也尝试将整个javascript块移动到js文件的末尾，然后在$(document).ready{内部尝试不同的东西。没有。

我错过了什么？感谢您阅读这篇文章！

更新：

所以我正在搞乱JSFIddle，并试图削减托管网站代码，直到它可以像工作JSFiddle一样运行，但我甚至到了两个小提琴相同但一个仍然不起作用的地步。我很难过。我甚至将工作小提琴复制并粘贴到一个新的小提琴中，新的也没有用！我真的不知道发生了什么......

Answer 1

这里的麻烦是“player.isMuted（）”不必返回布尔值。它可能/不可能。所以你应该确保你的检查返回布尔值。在这种情况下，快速的方法是使用双重否定技巧。所以：

尝试改变：

if(player.isMuted())
      {
        player.unMute();
      } else {
        player.mute();
      }

成

if(!!player.isMuted())
      {
        player.unMute();
      } else {
        player.mute();
      }

这样对我工作。

如果你想获得更多关于这个解决方案的信息，请查看这些文章：codereviewvideos.com/blog/example-javascript-double-negative或sitepoint.com/javascript-double-negation-trick-trouble或Jamie Treworgy在这里回答：stackoverflow.com/questions/10467475/double-negation-in-javascript-what-is-the-purpose