使用 Jquery 停止在 Jquery 滑块中播放 youtube 视频

Question

我有一个标签式 jquery 滑块，用于在页面上显示整个项目的元素。其中一件事恰好是一个 youtube 视频，但是当用户点击滑块中的其他内容时，我无法弄清楚如何停止视频。

我查看了其他 stackoverflow 问题，但找不到任何符合我想要的内容，除了这里：Stop a youtube video with jquery?

但是，当使用 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 是基于 webkit 的，就像 Chrome。

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

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

感谢工作解决方案！