为什么 YouTube iframe 播放器在加载时不调用 onYouTubePlayerReady?

问题描述

我想加载一个 YouTube 视频，然后立即静音、播放、暂停和取消静音.在这样做时，我希望向用户展示一个没有大播放按钮的视频，并且底部有控件.为了做到这一点，我有以下代码:

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.com/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>

但是，经检查，onYouTubePlayerReady、onYouTubePlayerAPIReady、onYouTubeIframeAPIReady、onPlayerReady 和 mutePlayPauseUnmute 曾经被调用过.我做错了什么? 根据 https://developers.google.com/youtube/js_api_reference#onYouTubePlayerReady 看起来它应该可以工作，但它没有.

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

推荐答案

您在这里混淆了两个不同的播放器 API.

You're confusing two different player APIs here.

您要使用 iframe 播放器吗?如果是这样，您需要查看:https://developers.google.com/youtube/iframe_api_reference.

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

您需要定义以下方法，而不是定义 onYouTubePlayerReady:onYouTubeIframeAPIReady，创建您的播放器，然后分配一个 onPlayerReady回调.

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

确保包含 iframe 播放器 API 的 JavaScript，以便调用 onYouTubeIframeAPIReady:

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.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

<小时>

值得注意的是文档，因为您正在编写 iframe 而不是使用 JavaScript 为您执行此操作:

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

如果你确实写了标签，那么当你构造YT.Player 对象，您无需指定宽度值和高度，它们被指定为标签的属性，或者videoId 和 player 参数，在 src URL 中指定.

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.

另外，在你的 mutePlayPauseUnmute 函数中..

Also, in your mutePlayPauseUnmute function..

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

您需要触发 player 上的实际方法，而不是如上所述的 playerid.

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

这篇关于为什么 YouTube iframe 播放器在加载时不调用 onYouTubePlayerReady?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！