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

好吧，经过一些严重的头痛和混淆，通过谷歌API文档（谷歌拥有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>

我认为视频自动播放（在链接中使用“play（）;”）包含视频的div但我认为我实际上不会这样做，自动播放视频让我在其他人的网站上疯狂我不想在我自己的网站上让其他人接受这个。

所以你有它。一些有效的代码。虽然我不完全知道为什么。希望其他人觉得这有用！

**不要忘记确保您的页面链接了一个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消息实际上显示它应该有什么。请想象我面对面。

对于工作解决方案而言！

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

1 个答案: