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

Question

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

我有几个关于使用上述源代码嵌入YouTube视频时会发生什么的问题。该代码应生成一个 YouTube 播放器对象，该对象以用户喜欢的方式处理视频。当我使用 Youtube Player API（而不是使用嵌入代码）自己生成 Youtube 播放器时，我可以对其调用调用函数。

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对象可用，但它似乎不包含必要的函数。

这个问题可能是重复的。

Answer 1

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

Answer 2

这可以像下面这样完成。

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

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

a. 添加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 3

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

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

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

完整片段

Answer 4

在不加载父窗口中的 IFrame API 的情况下执行此操作的一个好方法是从 IFrame 中获取对象

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

Answer 5

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