自定义静音/取消静音按钮的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{之内，以尝试不同的事情。没有。

我错过了什么？ 感谢您的阅读！

UPDATE：

，所以我用的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 和杰米Treworgy答案是： stackoverflow.com/questions/10467475/double-negation-in-javascript-what-is-the-purpose