自定義靜音/取消靜音按鈕的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