Javascript 自定义静音/取消静音按钮Youtube API_Javascript_Youtube Api

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

javascript youtube-api

Javascript 自定义静音/取消静音按钮Youtube API,javascript,youtube-api,Javascript,Youtube Api,前言： <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

前言：

<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>

//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();
      }
});

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

我有一个简单的网站与普通HTML和CSS引导建立。主页上有一个嵌入式全屏Youtube视频，展示了一些歌手。因此，视频上的声音是需要的，但我也想要一个静音按钮，而不提供youtube视频的所有控制（暂停/播放、质量、字幕等）

我已经使用开发人员页面上的Youtube API在JSFIDLE中成功地实现了这一点

问题：

<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>

//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();
      }
});

问题是，使用与我网站上正在工作的JsFiddle完全相同的代码，我得到了错误

Uncaught TypeError:player.ismute不是htmldevelment上的函数
我已尝试将文档.getElementById（“muteButton”）.addEventListener
移动到不同的位置，包括onyoutubeiframeapiredy（）
的内部，但没有成功。我还尝试过将这整段javascript移到js文件的末尾，并放在$（文档）中。准备好{
尝试不同的东西。什么都没有
我错过了什么？
谢谢你读到这里
更新：
<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>

//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();
      }
});

所以我一直在摆弄JSFIDLE，试图精简托管的站点代码，直到它可以像工作的JSFIDLE一样工作，但我甚至达到了两个FIDLE完全相同，一个仍然不工作的地步。我被难住了。我甚至将工作的FIDLE复制并粘贴到一个新的FIDLE中，而新的FIDLE也不工作！我真的不工作知道发生了什么。这里的问题是“player.ismute（）”不必返回布尔值。它可以/不能。
因此，您应该确保您的检查返回布尔值。在这种情况下，最快的方法是使用双重否定技巧。因此：
尝试更改：
if(player.isMuted())
      {
        player.unMute();
      } else {
        player.mute();
      }

进入
我就是这样工作的
如果您想获得有关此解决方案的更多信息，请查看以下文章：
或
或者Jamie Treworgy回答如下：
将整个API脚本移动到jQuery
DOM就绪函数中，您是否尝试只放置脚本来为静音按钮提供事件侦听器？这应该不会引起问题，因为player
已经定义，并且youtube播放器API无疑已经准备好在绑定静音事件之前使用。@NewToJS Th至少，这是一个好主意！尽管我尝试过并得到了相同的结果：/1需要注意的是，甚至连OnPlayerReady（）或onPlayerStateChange（）都没有所以有些事情搞砸了，不能让玩家完全“准备就绪”…也许可以尝试将你的myPlayer
元素从iframe
交换到div
，但我不太清楚为什么你有一个iframe，播放器API会处理其余部分。我不能100%确定这会导致问题，我无法真正测试任何问题在这个时候，我会检查并给你一个可靠的答案。@NewToJS我会被诅咒的，我也不知道为什么会修复它。在API文档中，它确实说可以使用现有的iFrame，正如在fiddle中看到的那样，它有时可以工作。但是将它变成div是一个诀窍！谢谢！对于后者请注意，您是否介意将此作为我的帖子的答案，以便我可以接受它作为正确的答案？@BrandonVance您可以分享解决您问题的完整代码吗？感谢您提供此代码片段，它可能会提供一些有限的、即时的帮助。通过说明为什么这是一个很好的公关解决方案，正确解释其长期价值问题，并将使它更有用的未来读者与其他类似的问题。请您的答案添加一些解释，包括您所作的假设。