javascript 如何获得对现有 YouTube 播放器的引用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19603618/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get the reference to an existing YouTube player?
提问by Maximus S
<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen></iframe>
I have a few questions on what happens when I embed a YouTube video using source code like above. The code should generate a YouTube Player object that processes the video the way users like. When I generate a Youtube Player by myself using Youtube Player API(instead of using the embed code), I can call call functions on it.
我对使用上述源代码嵌入 YouTube 视频时会发生什么有几个问题。该代码应生成一个 YouTube Player 对象，以用户喜欢的方式处理视频。当我自己使用 Youtube Player API（而不是使用嵌入代码）生成一个 Youtube Player 时，我可以调用它的调用函数。
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
//player.playVideo(); will play the video.
My question is, how do I control the player object generated by the embed code? To put it in another way, from page http://www.youtube.com/watch?v=M7lc1UVf-VE, how do I play the video by calling SOMEPlayer.playVideo()? When you go to the url, ytplayerobject is available, but it doesn't seem to contain the necessary functions.
我的问题是，如何控制嵌入代码生成的播放器对象？换句话说，从页面http://www.youtube.com/watch?v=M7lc1UVf-VE，我如何通过调用播放视频SOMEPlayer.playVideo()？当您转到 url 时，ytplayer对象可用，但它似乎不包含必要的功能。
This question might be a duplicate of this.
这个问题可能是一个重复的这个。
回答by Maximus S
This can be done like the following.
这可以像下面那样完成。
Given a general YouTube embed source code:
给定一个通用的 YouTube 嵌入源代码：
<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen></iframe>
a. Add a enablejsapiquery param and set it to 1 in the src URL
一个。添加enablejsapi查询参数并在 src URL 中将其设置为 1
<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
b. Give it a unique id
湾 给它一个唯一的id
<iframe id="youtube-video" width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
c. Load YouTube iFrame API
C。加载 YouTube iFrame API
<script src="https://www.youtube.com/iframe_api"></script>
d. Create a player that references the existing iFrame
d. 创建一个引用现有 iFrame 的播放器
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('youtube-video', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady() {
console.log("hey Im ready");
//do whatever you want here. Like, player.playVideo();
}
function onPlayerStateChange() {
console.log("my state changed");
}
回答by user2909143
var player = YT.get('id-of-youtube-iframe');
回答by Tim Osadchiy
Maximus S gave a perfectly correct answer. The official YouTube IFrame Player API
docs suggest initialising the player through a unique id of an iframe with the video as var yPlayer = new YT.Player('unique-id');.
Maximus S 给出了完全正确的答案。官方YouTube IFrame Player API
文档建议通过 iframe 的唯一 id 初始化播放器，视频为var yPlayer = new YT.Player('unique-id');.
For the future readers of this question looking for a way to generate a YouTube Player from a reference to an iframe element without id (as myself), it is possible to do so by running var yPlayer = new YT.Player(iframeElement);if you add type="text/html"attribute to the iframe element and set enablejsapi=1parameter in the srcattribute:
对于这个问题的未来读者，他们正在寻找一种方法来从对没有 id 的 iframe 元素的引用（如我自己）生成 YouTube 播放器，var yPlayer = new YT.Player(iframeElement);如果您将type="text/html"属性添加到 iframe 元素并在中设置enablejsapi=1参数，则可以通过运行来实现该src属性：
<iframe type="text/html" height="360" width="640" src="https://www.youtube.com/embed/jNQXAC9IVRw?enablejsapi=1"></iframe>
<iframe type="text/html" height="360" width="640" src="https://www.youtube.com/embed/jNQXAC9IVRw?enablejsapi=1"></iframe>
回答by Thnesko
A great way to do this without loading the IFrame API in the parent window is to grab the object from the IFrame
在父窗口中不加载 IFrame API 的情况下执行此操作的一个好方法是从 IFrame 中获取对象
var ytplayer_window = document.getElementById("playerIFrame").contentWindow;
var player = ytplayer_window.yt.player.getPlayerByElement(ytplayer_window.player);
回答by faabiopontes
The best answer is almost right. You have to place "enablejsapi=1" on the iframe src. Something like:
最佳答案几乎是正确的。您必须在 iframe src 上放置“enablejsapi=1”。就像是：
<iframe id="youtube-video" width="560" height="315"
src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0"
allowfullscreen>
</iframe>
