Preface:
我想说我已经尽力避免使这个问题成为重复的问题，即自己搜索谷歌，阅读很多其他类似的问题等。我发现了很多真正有用的东西，这些东西使我遇到了这种特定情况我有代码可以展示，所以希望我的最后一个问题能够清晰且可以回答。
我有一个使用纯 HTML 和 CSS Bootstrap 构建的简单网站。主页上有一个嵌入的全屏 Youtube 视频，展示了一些歌手。因此，需要视频上有声音，但我也想要一个静音按钮，而不需要提供 YouTube 视频的所有控件（暂停/播放、质量、字幕等）。
我已经使用在其开发人员页面上找到的 Youtube API 在 JSFiddle 中成功完成了此操作。http://jsfiddle.net/Bvance/8bzxp9c2/ http://jsfiddle.net/Bvance/8bzxp9c2/
Problem:
问题是，使用我网站上工作 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 时将其与控制台中打印的播放器对象进行比较打印“玩家”对象的控制台的屏幕截图 https://i.stack.imgur.com/tNM0n.png
我试过移动document.getElementById("muteButton").addEventListener到不同的地方，包括内部onYouTubeIframeAPIReady()无济于事。我还尝试将整个 javascript 块移动到 js 文件的末尾和内部$(document).ready{只是为了尝试不同的事情。没有什么。
我缺少什么？
感谢您阅读本文！
UPDATE:
因此，我一直在摆弄 JSFIddle，并尝试缩减托管站点代码，直到它可以像工作的 JSFiddle 一样运行，但我什至达到了两个小提琴相同的地步，但其中一个仍然无法工作。我很困惑。我什至将工作小提琴复制并粘贴到一个新的小提琴中而且新的也不起作用！我真的不知道怎么回事..
