onPlayerReady() 未触发，播放器仅部分初始化答案

【问题标题】：onPlayerReady() is not firing, player is only partially initializedonPlayerReady() 未触发，播放器仅部分初始化
【发布时间】：2024-04-13 17:25:02
【问题描述】：

使用 Youtube iframe API 时，永远不会调用 onPlayerReady，播放器只是部分加载。

我尝试了其他帖子中的一些东西：

Here提出了两种解决方案：

设置origin 变量以匹配服务器域：我尝试在HTML 标记的iframe src 属性和初始化播放器时在playerVars 中设置它。似乎没有发生任何变化。

将<iframe> 替换为<div> 标签：这在其他项目中确实有效，但在这里没有。相反，当 javascript 尝试创建播放器时，我收到了一个从未有过的错误：

Uncaught TypeError: tubeId.indexOf is not a function
at returnFn (mytube.js:3115)
at Xg.c [as R] (www-embed-player.js:519)
at gh (www-embed-player.js:513)
at dh (www-embed-player.js:512)
at Xg.a.w (www-embed-player.js:509)
at $g (www-embed-player.js:510)
at Xg.h.da (www-embed-player.js:505)
at www-embed-player.js:533

该站点有两个播放器，虽然我只替换了其中一个的标签，但两个播放器都开始抛出此错误。另外，玩家变量现在返回了undefined。

This post 表示解决方案是将enablejsapi 设置为 1，但我已经在 HTML iframe 标记中这样做了。

这些错误并非在所有计算机中都发生。所有这些都是在运行 Google Chrome 的 Windows 8 机器上检测到的（无法在其他浏览器上测试）。在 MacOS 上的谷歌 Chrome 中也发生了同样的情况（尽管我无法测试在那里触发 mytube.js 错误的最后更改）。在我的电脑（windows 7，在 Chrome 和 Firefox 上测试该网站）一切正常，除了偶尔出现“无法在 'DOMWindow' 上执行 'postMessage'”错误（它说播放器来源设置为 http://www.youtube.com，虽然我已经更换了它）。这个错误并不总是弹出，但可能有 30% 的次数。

这就是我创建播放器的方式：

HTML：

<iframe id="video1" type="text/html" src="https://www.youtube.com/embed/?rel=0&enablejsapi=1&origin=https://mywebsite.com"></iframe>
<!-- Video ID is loaded on user interaction, using loadVideoById() -->

JS/jQuery:

$(document).ready(function() {
    loadYouTubeAPI();
});


function loadYouTubeAPI(){
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video1', {
        playerVars: {'origin':'https://mywebsite.com/'},
        events: {
            'onReady': onPlayerReady1
        },
    });
}

function onPlayerReady1(event) {    //I have different players that do different things when ready; I need different names for each onPlayerReady function
    (...)
}

Here 是控制台返回玩家变量的屏幕截图：左边是现在创建玩家的方式，右边是他们应该如何。在左图中，播放器缺少所有方法，因此我无法控制它。

【问题讨论】：

标签： javascript youtube-iframe-api

【解决方案1】：

尝试在 iframe 的 url 和 as 和属性中设置 ' enablejsapi="1" '，如下所示：

<iframe id="video1" type="text/html" src="https://www.youtube.com/embed/?rel=0&enablejsapi=1&origin=https://mywebsite.com" enablejsapi="1"></iframe>

【讨论】：

我更新了它，但不能马上测试。顺便说一下，这是网站：miriamhecht.com.ar/#obra_01。如果存在错误，该链接应该会触发错误

【解决方案2】：

在开发时从 URL 中删除 origin:https://mywebsite.com/ 和 playerVars: {'origin':'https://mywebsite.com/'} 块。在生产中记住以下几点：

来自 YouTube Player API Reference for iframe Embeds

作为一项额外的安全措施，您还应该在 URL 中包含 origin 参数，指定 URL 方案（http:// 或 https://）和主机页面的完整域作为参数值。虽然来源是可选的，但它可以防止恶意第三方 JavaScript 被注入您的页面并劫持您的 YouTube 播放器的控制权。

【讨论】：

我在将网站上传到服务器时添加了这些，因为如果不至少在其中一个地方设置原点，我根本无法让播放器工作。这会导致问题吗？

【解决方案3】：

更新：我发现链接到 mytube.js 和 www-embed-player.js 的错误是由于 Chrome 扩展程序（YouTube 的 SmartVideo）注入的代码所致；我仍然需要弄清楚原因，但不知何故，这个扩展会阻止玩家正确加载。禁用它并用div标签替换iframe标签似乎已经解决了这个问题。

【讨论】：