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

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

尝试更改：

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

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

1 个答案: