在 JavaScript 中暂停 YouTube iFrame API

Pausing YouTube iFrame API in JavaScript

提问by Yahreen

I have a Youtube video embedded in a slideshow that I would like to pause when the user clicks on an imgthumbnail:

我在幻灯片中嵌入了一个 Youtube 视频，当用户单击img缩略图时，我想暂停它：

<li><iframe width="430" height="241" src="http://www.youtube.com/watch?v=XjUz8IT0CYg?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="my-video"></iframe></li>

I've been over the Youtube API but I'm confused how to get things started.

我已经了解了 Youtube API，但我很困惑如何开始。

Does the API JS load automatically when I append ?enablejsapito the end of the YouTube video id?

当我附加?enablejsapi到 YouTube 的末尾时，API JS 会自动加载video id吗？

Here is my JS:

这是我的JS：

var player1 = document.getElementById('my-video');

$('img').click(function () {
  player1.pauseVideo();
})

EDIT:

编辑：

Here's what I did based on Matt's answer below, for anyone wondering:

这是我根据下面马特的回答所做的，对于任何想知道的人：

<li><iframe width="430" height="241" src="http://www.youtube.com/embed/XjUz8IT0CYg?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="player-1"></iframe></li>

<li><iframe width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="player-2"></iframe></li>

And then my JS:

然后我的JS：

var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Create YouTube player(s) after the API code downloads.
var player1;
var player2;

function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('player-1');
    player2 = new YT.Player('player-2');
}

Then in document.ready:

然后在document.ready：

$(document).ready(function () {
    $(".slideshow-1 img").click(function () {
        player1.stopVideo();
    });

    $(".slideshow-2 img").click(function () {
        player2.stopVideo();
    });
}

采纳答案by Matt Stone

Appending ?enablejsapiin the embed string does not automatically include the API code. It only registers that particular embed with the API.

?enablejsapi在嵌入字符串中附加不会自动包含 API 代码。它只使用 API 注册该特定嵌入。

You want to read the first example here: https://developers.google.com/youtube/iframe_api_reference

您想在此处阅读第一个示例：https: //developers.google.com/youtube/iframe_api_reference

1. The asynchronous code snippet downloads and executes the YT iframe API
2. onYouTubeIframeAPIReady()is fired when the API is ready
3. Create a new YT.Playerobject
4. Your code can now call pauseVideo()on your player object

1. 异步代码片段下载并执行 YT iframe API
2. onYouTubeIframeAPIReady()当 API 准备好时触发
3. 创建一个新YT.Player对象
4. 您的代码现在可以调用pauseVideo()您的播放器对象

You will most likely want to disable any events on your img until onYouTubeIframeAPIReady()has been fired.

您很可能希望禁用 img 上的任何事件，直到onYouTubeIframeAPIReady()被触发。

回答by Roi

If you want to keep your JS in external file use:

如果您想将 JS 保留在外部文件中，请使用：

HTML

HTML

<iframe id="player1" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>
<iframe id="player2" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>

JS

JS

var yt_int, yt_players={},
    initYT = function() {
        $(".ytplayer").each(function() {
            yt_players[this.id] = new YT.Player(this.id);
        });
    };
$.getScript("//www.youtube.com/player_api", function() {
    yt_int = setInterval(function(){
        if(typeof YT === "object"){
            initYT();
            clearInterval(yt_int);
        }
    },500);
});

Control Video

控制视频

yt_players['player_id'].playVideo();

The reason I do it this way is because I have the videos loading dynamically via the CMS and they open in an overlay. I set the close/open overlay functions to play/pause the video.

我这样做的原因是因为我通过 CMS 动态加载视频，并且它们在叠加层中打开。我设置了关闭/打开叠加功能来播放/暂停视频。

回答by Rijo

I have another solution:

我有另一个解决方案：

<iframe id="player1" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>
<iframe id="player2" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>

and

和

$('.ytplayer').each(function(){
    //this.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
    this.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*')
});