jquery - 使用 Jquery 停止在 Jquery slider 中播放 youtube 视频

Question

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

我查看了其他 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”是我控制 slider 的链接列表
“#video”是我给嵌入对象的 id。 (我使用的是旧的 Youtube 嵌入，而不是 iframe。)

有什么想法可以专门针对 youtube 视频执行此操作吗？

Answer 1

好的，在浏览了 Google API 文档(Google 拥有 Youtube)之后，我从他们的示例中拼凑了一些代码以使某些工作正常工作。这真的很不理想，因为当我尝试编写自己的等价物时，我并没有 100% 理解发生了什么以及为什么事情不工作。

我的 slider 设置为使用 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 消息实际上在它应该显示的时候显示。请想象我在捂脸。

是的，工作解决方案!