27

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

这个问题可能是这个的重复。

4

5 回答 5

37

这可以像下面这样完成。

给定一个通用的 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>

湾。给它一个唯一的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");
}
于 2013-10-26T08:42:55.380 回答
36 
var player = YT.get('id-of-youtube-iframe');
于 2016-04-01T22:25:13.657 回答
6

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

对于这个问题的未来读者正在寻找一种方法来从对没有 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>

完整片段

于 2016-12-21T21:05:01.690 回答
2

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

var ytplayer_window = document.getElementById("playerIFrame").contentWindow;
var player = ytplayer_window.yt.player.getPlayerByElement(ytplayer_window.player);
于 2015-02-05T09:09:43.977 回答
0

最好的答案几乎是正确的。您必须在 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>
于 2016-10-17T19:22:58.940 回答