在 JavaScript 中暂停 YouTube iFrame API [英] Pausing YouTube iFrame API in JavaScript

问题描述

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

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

<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>

我已经了解了 Youtube API，但我对如何开始感到困惑.

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

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

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

这是我的 JS:

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

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

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

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>

然后是我的 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');
}

然后在document.ready:

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

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

推荐答案

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

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

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

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

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

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.Player object
4. Your code can now call pauseVideo() on your player object

您很可能希望在 onYouTubeIframeAPIReady() 被触发之前禁用 img 上的任何事件.

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

这篇关于在 JavaScript 中暂停 YouTube iFrame API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！