Question

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

我已经尝试了其他帖子中的一些内容：

Here提出了两种解决方案：

设置origin变量以匹配服务器域：初始化HTML时，我尝试同时在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上的Google Chrome浏览器中也发生了同样的事情（尽管我无法测试最近触发mytube.js错误的更改）。在我的计算机中（Windows 7，在Chrome和Firefox上测试了该网站），所有内容都可以正常运行，但偶尔会出现“无法在“ DOMWindow”上执行“ postMessage”失败”错误（它表示播放器来源设置为{{3} }，尽管我已经替换了它）。该错误并非总是会弹出，但可能会弹出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
    (...)
}

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

Answer 1

尝试在url和iframe的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>

Answer 2

在开发时从URL和select a.*, ac.name as category_name, ap.name as parent_name from b left join a ac on b.category = ac.id left join a ap on b.parent = ap.id;块中删除origin:https://mywebsite.com/。在生产中请记住以下几点：

从 YouTube Player API Reference for iframe Embeds

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

Answer 3

更新：我发现链接到mytube.js和www-embed-player.js的错误是由于Chrome扩展程序（适用于YouTube的SmartVideo）注入的代码引起的；我仍然必须弄清楚为什么，但是由于某种原因，此扩展程序会阻止播放器正确加载。禁用它并用iframe标签替换div标签似乎已经解决了问题。

onPlayerReady（）未触发，播放器仅被部分初始化

3 个答案: