javascript - Why isn't the YouTube iframe player calling onYouTubePlayerReady when it's loaded? - Stack Overflow

admin管理员组

文章数量:1290375

I want to load a YouTube video, then mute, play, pause, and unmute it immediately. In doing this, I hope to present the user with a video that doesn't have a big play button on it, and does have the controls on the bottom. In order to do this, I have the following code:

<script type="text/javascript">
function onYouTubePlayerReady(playerid)
{
    mutePlayPauseUnmute(playerid);
}
function onYouTubePlayerAPIReady(playerid)
{
    mutePlayPauseUnmute(playerid);
}
function onYouTubeIframeAPIReady(playerid)
{
    mutePlayPauseUnmute(playerid)
}
function onPlayerReady(playerid)
{
    mutePlayPauseUnmute(playerid)
}

function mutePlayPauseUnmute(playerid)
{
    var player = document.getElementById(playerid);
    player.mute();
    player.playVideo();
    player.pauseVideo();
    player.unMute();
}
</script>
<iframe id="quotedVideo1" type="text/html" width="246" height="160" src=";rel=0&showinfo=0&autohide=1&iv_load_policy=3&theme=light&enablejsapi=1&playerapiid=quotedVideo1" frameborder="0"> <!-- Magic Comment --> </iframe>

However, upon inspection, neither onYouTubePlayerReady, onYouTubePlayerAPIReady, onYouTubeIframeAPIReady, onPlayerReady, nor mutePlayPauseUnmute is ever called. What have I done wrong? According to it looks like it should work, but it doesn't.

I want to load a YouTube video, then mute, play, pause, and unmute it immediately. In doing this, I hope to present the user with a video that doesn't have a big play button on it, and does have the controls on the bottom. In order to do this, I have the following code:

<script type="text/javascript">
function onYouTubePlayerReady(playerid)
{
    mutePlayPauseUnmute(playerid);
}
function onYouTubePlayerAPIReady(playerid)
{
    mutePlayPauseUnmute(playerid);
}
function onYouTubeIframeAPIReady(playerid)
{
    mutePlayPauseUnmute(playerid)
}
function onPlayerReady(playerid)
{
    mutePlayPauseUnmute(playerid)
}

function mutePlayPauseUnmute(playerid)
{
    var player = document.getElementById(playerid);
    player.mute();
    player.playVideo();
    player.pauseVideo();
    player.unMute();
}
</script>
<iframe id="quotedVideo1" type="text/html" width="246" height="160" src="https://www.youtube./embed/NWHfY_lvKIQ?modestbranding=1&rel=0&showinfo=0&autohide=1&iv_load_policy=3&theme=light&enablejsapi=1&playerapiid=quotedVideo1" frameborder="0"> <!-- Magic Comment --> </iframe>

However, upon inspection, neither onYouTubePlayerReady, onYouTubePlayerAPIReady, onYouTubeIframeAPIReady, onPlayerReady, nor mutePlayPauseUnmute is ever called. What have I done wrong? According to https://developers.google./youtube/js_api_reference#onYouTubePlayerReady it looks like it should work, but it doesn't.

• javascript
• youtube-api
• youtube-javascript-api

Share Improve this question Follow edited Feb 21, 2013 at 17:14 Ky - asked Feb 21, 2013 at 13:33 Ky -Ky - 32.2k5252 gold badges203203 silver badges324324 bronze badges 2

• worth noting: "players must be at least 200px by 200px." – Nirvana Tikku Commented Feb 21, 2013 at 18:53
• I know... the client requires it to be exactly this size :/ – Ky - Commented Feb 21, 2013 at 23:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

You're confusing two different player APIs here.

Do you want to use the iframe player? If so, you'll want to look at: https://developers.google./youtube/iframe_api_reference.

Instead of defining onYouTubePlayerReady, you'll want to define the following method: onYouTubeIframeAPIReady, create your player, and then assign an onPlayerReady callback.

Make sure you're including the JavaScript for the iframe player API, in order for onYouTubeIframeAPIReady to be called:

var tag = document.createElement('script');
tag.src = o.protocol + "://www.youtube./iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

---

Worth noting from the doc, since you're writing the iframe instead of using JavaScript to do that for you:

If you do write the tag, then when you construct the YT.Player object, you do not need to specify values for the width and height, which are specified as attributes of the tag, or the videoId and player parameters, which are are specified in the src URL.

Also, in your mutePlayPauseUnmute function..

playerid.mute();
playerid.playVideo();
playerid.pauseVideo();
playerid.unMute();

You'll want to trigger the actual the methods on the player as opposed to the playerid as described above.

本文标签：