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

Question

前言:

我想说的是，我已尽最大努力避免将此问题变成重复问题，即我自己搜索了 Google，阅读了很多其他类似的问题，等等。我发现了很多真正有用的东西，这些东西让我想到了这个具体情况我有代码可以展示，所以希望我的最后一个问题是明确和可回答的。

我有一个使用纯 HTML 和用于 CSS 的 Bootstrap 构建的简单网站。主页上有一个嵌入式全屏 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()无济于事。我还尝试将这整 block javascript 移动到 js 文件的末尾和 $(document).ready{ 中。只是为了尝试不同的事情。什么都没有。

我错过了什么？感谢您阅读到这里!

更新:

所以我一直在摆弄 JSFIddle，并试图精简托管站点代码，直到它可以像正常工作的 JSFiddle 一样运行，但我什至到了两个 fiddle 完全相同但一个仍然无法正常工作的地步。我很难过。我什至将工作 fiddle 复制并粘贴到一个新 fiddle 中，但新 fiddle 也不起作用!我真的不知道发生了什么......

Answer 1

这里的问题是“player.isMuted()”不必返回 bool 值。它可以/不能。所以你应该确保你的支票返回 bool 值。在这种情况下，快速的方法是使用双重否定技巧。所以:

尝试改变:

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