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

Posted 2023-02-22

【中文标题】自定义静音/取消静音按钮 Youtube API

【英文标题】：Custom mute/unmute button Youtube API

【发布时间】：2018-01-30 03:04:40

【问题描述】：

前言：

我想说我已经尽力避免让这个问题成为一个重复的问题，即我自己搜索了谷歌，阅读了很多其他类似的问题，等等。我发现了很多非常有用的东西让我知道了这个我有代码要显示的具体情况，所以希望我的最后一个问题将是清晰和可回答的。

我有一个简单的网站，使用纯 html 和 CSS 的 Bootstrap 构建。主页上有一个嵌入的全屏 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"   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 只是完整文件的 sn-p，但它是文件中的第一部分。我使用一些 JQuery 并在这部分代码下方有一个 $(document).ready。我知道将 API 调用放入其中是行不通的（我已经尝试过了）。

我的尝试：

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

您可以在使用 JSFiddle 时将其与控制台中打印的播放器对象进行比较 Screenshot of console for printed 'player' object

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

我错过了什么？ 感谢您阅读到这里！

更新：

所以我一直在搞乱 JSFIddle 并试图削减托管站点代码，直到它可以像正常工作的 JSFiddle 一样运行，但我什至达到了两个小提琴相同但一个仍然无法工作的地步。我难住了。我什至将工作中的小提琴复制并粘贴到一个新的 中，但新的也不起作用！ 我真的不知道发生了什么......

【问题讨论】：

而不是将整个 API 脚本移动到 jQuery DOM 就绪函数中，您是否尝试仅放置脚本来为静音按钮带来事件侦听器？这应该不会导致问题，因为 player 已经定义，并且 youtube 播放器 API 无疑可以在您绑定静音事件之前使用。

@NewToJS 这是个好主意！虽然我尝试过并且得到了相同的结果：/ 需要注意的一点是，甚至没有调用 OnPlayerReady() 或 onPlayerStateChange()。所以有些事情搞砸了，不允许玩家完全“准备好”......

也许尝试将您的myPlayer 元素从iframe 换成div，不太确定为什么您有一个iframe，播放器API 会处理剩下的事情。不是 100% 肯定会导致问题，我目前无法真正为自己测试任何东西，否则我会检查并给你一个可靠的答案。

@NewToJS 我会被诅咒的，做到了！我也不确定为什么要修复它。在 API 文档中，它确实说现有的 iFrame 是可能的，并且如小提琴中所见，它有时可以工作。但是让它成为一个 div 是诀窍！谢谢！在后面的说明中，您介意将其作为我帖子的答案发布，以便我接受它作为正确答案吗？

@BrandonVance 你能分享解决你问题的完整代码吗？

【参考方案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 或 Jamie Treworgy 回答： ***.com/questions/10467475/double-negation-in-javascript-what-is-the-purpose

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。一个正确的解释would greatly improve 它的长期价值，通过展示为什么这是一个很好的解决问题的方法，并将使它对未来有其他类似问题的读者更有用。请edit您的回答添加一些解释，包括您所做的假设。