使用 Jquery 阻止 YouTube 视频在 Jquery 滑块中播放

Question

我有一个选项卡式 jquery 滑块，用于在页面上显示整个项目的元素。其中之一恰好是 YouTube 视频，但我没有运气弄清楚当用户单击滑块中的其他内容时如何停止视频。

我查看了其他 stackoverflow 问题，但找不到任何符合我想要的内容，除了这里： 使用 jquery 停止 YouTube 视频？

但是，当使用 vimeo 视频可以更简单地完成此操作时，将视频添加/删除到 dom 以使这项工作似乎过多。 （参见 http://www.taprootfoundation.org/ ...不，我不能只是使用 vimeo :S)

我尝试过这个：

$(document).read(function () {
    $("ul#subNav li a").click(function () {
        $('#video').stopVideo();
    });
});

我还尝试将 $('#video').stopVideo(); 更改为 $(window).find(embed).stopVideo( ）； ……或者类似的事情，我脑子里记不起来了。

我也尝试过：

$(document).read(function () {
    $("ul#subNav li a").click(function () {
        var myPlayer = document.getElementById('video');
        myPlayer.stopVideo();
    });
});

“ul#subNav li a”是我控制滑块的链接列表 “#video”是我为嵌入对象指定的 ID。 （我使用的是旧的 Youtube 嵌入，而不是 iframe。）

有什么想法如何专门对 YouTube 视频执行此操作吗？

Answer 1

好吧，在浏览 Google API 文档（Google 拥有 Youtube）后，我经历了一些严重的头痛和困惑，我从他们的示例中拼凑出代码来使一些东西发挥作用。这确实不理想，因为当我尝试编写自己的等价物时，我并不 100% 理解发生了什么以及为什么事情不起作用。

我的滑块设置为使用 div 作为每张幻灯片的“容器”。整个代码进入我想要视频的div。

<!--this is only displayed when the browser does not have flash or js -->
<div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.
</div>

<script type="text/javascript">
//calls the video player by ID so it can be accessed later
function onYouTubePlayerReady(playerId){ytplayer = document.getElementById("playerID");}
     //playerID is arbitrary, what you would normally give to your object or embed element
     var params = { allowScriptAccess: "always" };var atts = { id: "playerID" };

     //this next line totally replaces the object/embed element normally used.
     //be careful when replacing the URL below, only replace the URL up to the question mark (the end of the video ID), the bits after that are REQUIRED for this to work.
     //425/356 etc are sizes of the video
     swfobject.embedSWF("http://www.youtube.com/e/videoID?enablejsapi=1&version=3&playerapiid=ytplayer","ytapiplayer", "425", "356", "8", null, null, params, atts);

     //function to have the video play
     function play() {if (ytplayer) {ytplayer.playVideo();}}

     //function to have the video pause -- apparently using stopVideo isn't best practice. Check GoogleApi for more info: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls
     function pause() {if (ytplayer) {ytplayer.pauseVideo();}}
</script>

这是我的链接代码，在一个完全不同的div中找到：

<a href="#one" rel="1" onclick="pause();"> One</a>
<a href="#two" rel="1" onclick="pause();"> Two</a>
<a href="#three" rel="1" onclick="play();"> Three</a>

我考虑让包含以下内容的div自动播放视频（通过在链接中使用“play();”）视频，但我想我实际上不会这样做，自动播放视频在其他人的网站上让我发疯，所以我不想让其他人在我自己的网站上受到这种影响。

这样你就得到了。一些有效的代码。虽然我完全不知道为什么。希望其他人觉得这有帮助！

**不要忘记确保您的页面链接了 swfobject.js 文件！
我在文档的头部做了这个：

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script><!--Uses Google API library-->

**更新：
不适用于 Safari 或 Firefox，但适用于 IE8 和 Chrome。我很想知道为什么，因为通常 Firefox 或 IE 本身运行不佳，而 Safari 和 Chrome 一样都是基于 webkit 的。

您可能有的任何想法都会有所帮助。在那之前，我将寻找新的解决方案，并在找到它时发布它。

**更新 #2：实际上可以在所有四种主要浏览器（Chrome、Safari、Firefox 3.6 和 IE8 - 未针对低于 IE8 或 FF3.6 的版本进行测试）中运行，结果我需要更新 Safari 和 FF 的插件支持 Flash，因此非 Flash 消息实际上在应该显示的时候显示。请想象我捂脸的样子。

耶，工作解决方案！