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

Question

前言：

我想说的是，我已经尽了最大努力避免把这个问题变成重复的问题，也就是说，我自己搜索了谷歌，阅读了很多其他类似的问题，等等。我发现了很多非常有用的东西，这些东西让我找到了这个特定的情况，我有代码要展示，所以希望我的最后一个问题能够清楚地回答。

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

我已经使用他们开发页面上的Youtube API在JSFIDLE中成功地实现了这一点。http://jsfiddle.net/Bvance/8bzxp9c2/

问题：

问题是，使用我网站上工作的JsFiddle中完全相同的代码，我得到了错误Uncaught-TypeError:player。IsMute不是HTMLDivelment的函数。

这是我的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，并有一个$（文档）。准备好了{code>，在这部分代码下面。我知道，把API调用放进去是行不通的（我已经试过了）。

我试过的：

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

您可以将其与控制台中打印的播放器对象进行比较，同时使用控制台的JSFiddle屏幕截图来打印“播放器”对象

我已经尝试过将document.getElementById（"muteButton"）. addEventListener移动到不同的地方，包括onYouTubeIframeAPIReady（）内部，但没有用。我还尝试过将这整块javascript移动到js文件的末尾和$（文档）内。就绪{只是为了尝试不同的东西。什么都没有。

我错过了什么？感谢您阅读到目前为止！

更新：

所以我在处理JSFIddle，试图精简托管的站点代码，直到它可以像工作的JSFIddle一样工作，但我甚至达到了这样的程度：两个fiddle是相同的，一个仍然不工作。我被难住了。我甚至复制并粘贴了一个新的工作小提琴和新的一个也没有工作！我真的不知道发生了什么。。




Answer 1

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

尝试更改：

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

进入

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

这样为我工作。

如果你想获得更多关于这个解决方案的信息，请查看以下文章：codereviewvideos。com/blog/example-javascript双负或sitepoint。com/javascript双重否定技巧麻烦或Jamie Treworgy回答如下：stackoverflow.com/questions/10467475/double-negation-in-javascript-what-is-the-purpose