如何获取对现有 YouTube 播放器的引用？

Question

<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen></iframe>

关于使用上述源代码嵌入 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.

我的问题是，如何控制嵌入代码生成的播放器对象？换句话说，从页面http://www.youtube.com/watch?v=M7lc1UVf-VE，我如何通过调用SOMEPlayer.playVideo()来播放视频？当你转到 url 时，ytplayer 对象是可用的，但它似乎没有包含必要的功能。

此问题可能与this 重复。

Answer 1

这可以像下面这样完成。

给定一个通用的 YouTube 嵌入源代码：

<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen></iframe>

一个。添加enablejsapi查询参数并在src URL中设置为1

<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

b.给它一个唯一的ID

<iframe id="youtube-video" width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

c。加载 YouTube iFrame API

<script src="https://www.youtube.com/iframe_api"></script>

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");
}

Answer 2

Maximus S 给出了完全正确的答案。官方 YouTube IFrame Player API 文档建议通过 iframe 的唯一 ID 初始化播放器，视频为 var yPlayer = new YT.Player('unique-id');。

对于这个问题的未来读者正在寻找一种方法来从对没有 id 的 iframe 元素的引用生成 YouTube 播放器（就像我自己一样），如果您添加 type="text/html"，则可以通过运行 var yPlayer = new YT.Player(iframeElement); 来做到这一点属性到 iframe 元素并在src 属性中设置enablejsapi=1 参数：

<iframe type="text/html" height="360" width="640" src="https://www.youtube.com/embed/jNQXAC9IVRw?enablejsapi=1"></iframe>

Full snippet

Answer 3

最好的答案几乎是正确的。 您必须在 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>

Answer 4

var player = YT.get('id-of-youtube-iframe');

Answer 5

在父窗口中不加载 IFrame API 的一个好方法是从 IFrame 中获取对象

var ytplayer_window = document.getElementById("playerIFrame").contentWindow;
var player = ytplayer_window.yt.player.getPlayerByElement(ytplayer_window.player);