jquery - 无法弄清楚如何在点击时暂停 YouTube 视频

Question

我的用户正在使用旧的嵌入方法，即利用 YouTube 为您提供的标签而不是 iframe。我正在尝试弄清楚如何在用户与其交互时检测播放器状态(暂停、播放等)，以便我可以在用户单击下一张幻灯片时暂停视频。

目前，我使用 Wordpress，有一个元框，允许他们粘贴 YouTube 嵌入代码，然后我将该代码块输出到 slider 上。我正在我的本地主机上工作(例如: http://mysite.dev )。需要知道的是，用户可能在 slider 上有多个视频。

我一生都无法执行 YouTube API。

1) 这是他们粘贴到框中的 YouTube 嵌入对象

<object width="475" height="271">
    <param name="movie" value="http://www.youtube.com/v/soefG7iisoE?wmode=opaque&version=3&enablejsapi=1&modestbranding=1&autohide=1&rel=0&hl=en_US"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/soefG7iisoE?wmode=opaque&version=3&enablejsapi=1&modestbranding=1&autohide=1&rel=0&hl=en_US" type="application/x-shockwave-flash" width="475" height="271" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

2) 该视频位于我用以下 div 制作的 slider 中:

<div class="videoContainer">
   [there youtube embed code outputs here - see point 1]
</div>

我正在使用 JQuery，并且尝试像这样调用 API:

function onYouTubePlayerReady(playerId) {
    // using the class and the tag as selector because there could be 
    // multiple videos *and* the user might not put an ID in the object tag
    ytplayer = $('.videoContainer object'); 
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
    alert("Player's new state: " + newState);
}

我有一个名为 stopCycle 的函数，包含在 jQuery(document).ready(function($) {}); 中代码块，当用户单击下一张幻灯片时，我需要调用这个函数。

这是我的问题:

1. 我需要调用任何外部 JavaScript 文件吗？
2. 在 JQuery 文档就绪 block 中，如何调用 YouTube API 来检查视频是否正在播放？
3. 我的代码中是否还缺少其他内容或您需要查看的内容？

我想知道让他们只输入 YouTube URL 是否会更好，然后我将使用 JQuery SWFObject 输出视频。我不知道如何循环播放每张幻灯片的视频(总共 5 张)。那么，如果他们为每个 slider 都有一个视频，我该怎么做？

我知道...这里充满了问题。

Answer 1

据我所知，您有一个错误:

ytplayer = $('.videoContainer object'); 
//should be
ytplayer = document.getElementById("myytplayer");

然后您可以使用任何 api 调用 here ，一切都应该工作得很好

您不能为此使用 jQuery 选择器的原因是因为期望 <embed>元素。 jQuery 返回的是与选择器匹配的所有元素的数组。

回答您的问题:

• 1)除非你的js位于外部文件中
• 2) 获取当前视频ytplayer .getVideoUrl()
• 3)如前所述
• 4/5) 您可以使用以下命令设置播放列表:ytplayer .cuePlaylist