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

时间:2012-04-20 16:01:27

标签: javascript jquery html youtube youtube-api

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

我已使用以下代码在我的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对象?谢谢你的帮助。

1 个答案:

答案 0 :(得分:3)

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

添加了以下功能:

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

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

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