自定义静音/取消静音按钮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-negative或sitepoint.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 视频