通过传递 DOM 对象从 HTML 中的 iframe 创建 YT.Player 对象

Question

我的 html 中有一个嵌入的 youtube 视频 iframe，我需要以编程方式停止它，但我无法设置 iframe 的 ID。因此，我试图通过将 DOM 元素传递给 YT.Player 构造函数而不是 iframe id 来创建 youtube 对象，如 docs 中指定的那样。我还在 iframe src url 的末尾附加了 '?enablejsapi=1'。

我已使用以下代码在我的 js 文件顶部加载了 youtube js api：

var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubePlayerAPIReady(){ console.log('yt api ready'); }

之后我有以下代码：

$(function(){
    $('a.close').click(function(){
        var player = new YT.Player($('iframe').get(0));
        player.stopVideo();
    });
})

我得到了输出：

yt api ready
Uncaught TypeError: Object [object Object] has no method 'stopVideo'

我假设我以某种方式搞砸了对象实例化，但我不知道如何正确执行此操作。如何在不向构造函数传递 iframe id 的情况下创建 YT.Player 对象？感谢您的帮助。

Answer 1

我需要将停止视频通话移动到播放器对象的就绪事件中。以下更改为我修复了它

新增如下功能：

function onMyPlayerReady(event) { event.target.stopVideo(); }

并将 yt.player 构造函数更改为：

new YT.Player($('iframe').get(0), { events: { 'onReady': onMyPlayerReady } });