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

【问题标题】：Can't Figure Out How to Pause YouTube Video on Click无法弄清楚如何在点击时暂停 YouTube 视频
【发布时间】：2011-12-11 23:36:02
【问题描述】：

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

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

我一辈子都无法执行 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 制作的滑块中：

<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($) {});代码块，当用户点击下一张幻灯片时，我需要调用这个函数。

所以这是我的问题：

我需要调用任何外部 JavaScript 文件吗？
在我的 JQuery 文档就绪块中，如何调用 YouTube api 检查视频是否正在播放？
我的代码中是否还有其他遗漏或您需要查看的内容？

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

我知道...这里满是问题。

【问题讨论】：

标签： jquery wordpress youtube-api youtube-javascript-api

【解决方案1】：

$('iframe').each(function(i,e){
    let iframeSrc = $(e).attr('src');
    $(e).attr('src',iframeSrc);
});

这将为所有视频重置 src，您可以将其修改为仅定位一个

let iframeSrc = $('.youtube_video').attr('src');
$('.youtube_video').attr('src',iframeSrc);

将“.youtube_video”类替换为您的实际 iframe 类

注意：不要忘记在点击事件时触发它

【讨论】：

【解决方案2】：

如果您使用的是 Youtube API，您应该可以像这样暂停视频：

var ytplayer = document.getElementById("myytplayer");
pauseVideo = function(){
    if (ytplayer){
        ytplayer.pauseVideo();
    }
}

<a href="javascript:void(0);" onclick="pauseVideo();">Pause</a>

详情请看这里：
http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

编辑

如果嵌入式播放器没有ID，你可以试试这样：

function onYouTubePlayerReady(playerId) {
    $("#" + playerId)[0].addEventListener('onStateChange', "(function(state) { return playerState(state, '" + playerId + "'); })");
}

function playerState(state, playerId) {
    console.log(state);
    console.log(playerId);
}

【讨论】：

如果用户没有在嵌入对象上添加 id 怎么办？有没有办法说当“这个”被点击时暂停视频？
我现在尝试了您的代码，但它不起作用。我想知道我是否缺少让 API 与 YouTube 和嵌入代码一起使用的东西。我取出代码，将其放在一个空的 HTML 文件中，并尝试了您的代码并且没有任何工作，所以我认为我没有调用 API 来正确初始化。想法？
您是否尝试过使用第一个解决方案与静态视频源（不是由用户在论坛中动态添加的）？
好的，所以 api 正在调用该函数。我刚试过这个：function onYouTubePlayerReady(playerId) { console.log('onYouTubePlayerReady function called'); console.log('playerId: ' + playerId); } 如果我尝试这样的事情：ytplayer = $('#'+playerId) 那么脚本会中断并且没有任何进展。让这个工作变得令人困惑。

【解决方案3】：

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

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

然后你可以使用任何 api 调用 here，一切都应该正常工作

您不能为此使用 jQuery 选择器的原因是因为它需要一个 <embed> 元素。 jQuery 返回的是一个包含与选择器匹配的所有元素的数组。

回答您的问题：

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

【讨论】：