关于javascript：自定义静音/取消静音按钮Youtube API

Custom mute/unmute button Youtube API

前言：

我想说我已经尽了最大努力避免把这个问题变成重复的问题，也就是说，我自己搜索了谷歌，阅读了很多其他类似的问题，等等。我发现了很多有用的东西，这些东西让我找到了这个特定的情况，我有代码要显示，所以希望我的最后一个问题是清楚的，可以回答的。

我有一个简单的网站，用简单的HTML和CSS引导。主页上有一段嵌入的、全屏的YouTube视频，展示了一些歌手。所以视频中需要声音，但我也需要一个静音按钮，而不提供YouTube视频的所有控制(暂停/播放、质量、标题等)。

我已经使用开发人员页面上的youtube API在jfiddle中成功地完成了这项工作。http://jsfidle.net/bvance/8bzxp9c2/

问题：

问题是，在我的网站上，使用与工作jfiddle完全相同的代码，我会得到错误。Uncaught TypeError: player.isMuted is not a function at HTMLDivElement. (main.js:154)

这是我的HTML：

1
2
3
4
5
6
7
8
9
10
11
12

这是我的javascript：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

//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调用放入其中不起作用(我已经尝试过了)。

我试过的：

在调试过程中，我在调用YT.Player()之前和之后一直将player对象打印到控制台，一个对象正在返回。尽管出于某种原因，它无法访问我的网站上的任何功能。但是，在检查JSfiddle代码时，它确实会在打印到控制台时显示所有内容。

当使用jsFiddle时，可以将其与控制台中的打印播放器对象进行比较。打印的"播放器"对象的控制台屏幕截图

我试过把document.getElementById("muteButton").addEventListener移动到不同的地方，包括onYouTubeIframeAPIReady()的内部，但没有用。我还尝试将整个javascript块移动到JS文件的末尾和$(document).ready{中，只是为了尝试不同的东西。没有什么。

我错过了什么？谢谢你这么远的阅读！

更新：

因此，我在处理JSfiddle，并试图减少托管站点代码，直到它可以像工作中的JSfiddle一样工作，但我甚至达到了两个fiddle完全相同，一个仍然不工作的地步。我被难住了。我甚至复制粘贴工作小提琴到一个新的，新的也没有工作！我真的不知道发生了什么……