首页 > 编程语言> > javascript-在iframe中加载Youtube Player API

javascript-在iframe中加载Youtube Player API

2019-11-22 17:37:50 作者：互联网

我有一个网站,里面有几个内部(即没有src)iframe,我想在其中包含一个YouTube播放器(使用其API).简而言之,我希望iframe中的播放器由父页面管理.

问题是代码初始化AFAIK无法与iframe一起使用.例如：

var player = new YT.Player('video-player1', {});

您可能已经猜到了,问题是您无法定义包含该ID的文档.在jQuery中,我将使用类似：

$("video-player1", frames["iframe1"].document)

有什么解决方法吗？很明显,我能看到的唯一解决方案是在每个iframe中加载YT api并在任何iframe中运行,但这将意味着从我的应用程序中重构很多逻辑,除了需要多次加载Youtube JS文件之外.

解决方法:

对不起,队友.您的问题的解决方案“易于”编写代码/实现,但痛苦且难以维护.

YouTube API不允许将YT.Player对象嵌入iframe(例如,iframe中的div),因为它在窗口对象中而不是iframe文档中查找“ player”节点.

因此,为此的快速修补程序将是保存API文件的副本并对其进行修改以添加此功能.显然,从那时起,您有责任提供这些文件并更新它们,以免文件过时.

解决方案是(我认为在Youtube API之前加载JQuery是理所当然的)：

使用https://developers.google.com/youtube/iframe_api_reference#Getting_Started提供的基本示例,我想您有这个
< iframe id =“ if”>< / iframe>而不是< div id =“ player”>< / div>然后稍后将播放器div附加到该iframe中.

<body>
    <iframe id="if"></iframe>

    <script>
        $('#if').contents().find('body').append($('<div id="player"></div>'));
        // ...

因此,在定义onYoutubeAPIReady()之后,必须向YT.Player构造函数添加1个参数：

function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', { /* options */ }, $('#if') );

那就是$(‘#if’),您要在其中嵌入播放器的iframe元素.

iframe_api

在此文件中,您只需要修改其加载的脚本的src：

从
a.src =’http://s.ytimg.com/yts/jsbin/www-widgetapi-vflOb0oo1.js

到a.src =’./widget.js’; (widget.js是www-widgetapi-vflOb0oo1.js的副本).

最后在widget.js上：

在这里,您必须修改这两个函数：函数S(a,b)和函数Y(a,b).

为了获得iframe参数,将第一个函数Y(a,b)转换为函数Y(a,b,c).然后在其主体中更改S.call(this,a,new nb(b));到S.call(this,a,new nb(b),c);

其次,将函数S(a,b)转换为函数S(a,b,dom),并将c = document
c = dom ===未定义？文档：dom.contents()[0].

现在,您在iframe中拥有一个Youtube播放器,并且可以在父窗口中使用它了.

我希望它是有用的！

标签：iframe,youtube-api,javascript
来源： https://codeday.me/bug/20191122/2061286.html