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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义静音/取消静音按钮Youtube API相关的知识,希望对你有一定的参考价值。

前言:

我想说我已经尽力避免让这个问题成为一个重复的问题,即我自己搜索谷歌,阅读了很多其他类似的问题,等等。我发现很多真正有用的东西让我在这个特定的情况下我有代码展示,所以希望我的最后一个问题是清楚和可回答的。

我有一个简单的网站,使用纯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{内部尝试不同的东西。没有。

我错过了什么?感谢您阅读这篇文章!

更新:

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

答案

这里的麻烦是“player.isMuted()”不必返回布尔值。它可能/不可能。所以你应该确保你的检查返回布尔值。在这种情况下,快速的方法是使用双重否定技巧。所以:

尝试改变:

if(player.isMuted())
      {
        player.unMute();
      } else {
        player.mute();
      }

if(!!player.isMuted())
      {
        player.unMute();
      } else {
        player.mute();
      }

这样对我工作。

如果你想获得更多关于这个解决方案的信息,请查看这些文章:codereviewvideos.com/blog/example-javascript-double-negativesitepoint.com/javascript-double-negation-trick-trouble或Jamie Treworgy在这里回答:stackoverflow.com/questions/10467475/double-negation-in-javascript-what-is-the-purpose

以上是关于自定义静音/取消静音按钮Youtube API的主要内容,如果未能解决你的问题,请参考以下文章

视频取消静音时无法通过 iframe API 播放 YouTube 视频

想要为全屏视频背景上的音频创建自定义静音/取消静音按钮

VideoJS 播放器自定义静音/取消静音切换

一次静音播放多个YouTube视频

无法在移动设备上使用 Revolution Slider 取消 YouTube 视频静音

如何快速制作静音和取消静音按钮?