13

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

<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，但我很困惑如何开始。

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

这是我的 JS：

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

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

编辑：

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

<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();
    });
}
4

3 回答 3

19

如果要将 JS 保存在外部文件中，请使用：

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

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

控制视频

yt_players['player_id'].playVideo();

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

于 2013-01-15T23:27:46.067 回答
13

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

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

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

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

于 2012-09-20T23:45:38.620 回答
1

我有另一个解决方案：

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

和

$('.ytplayer').each(function(){
    //this.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
    this.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*')
});
于 2018-03-15T06:49:19.577 回答