用jquery停止YouTubevideo?

我有一个jQuery的滑块,我已经build立,基本上只有三个通过应用负的左CSS值滑动pannels。 很好用,但是我在幻灯片中有一个youtubevideo,当我滑动时不会停止。 我试过显示:无和可见性:隐藏其中除了IE浏览器的所有作品,audio继续在IE浏览器。

有没有简单的方法来杀死与jQuery的video?

从API文档 :

player.stopVideo() 

所以在jQuery中:

 $('#playerID').get(0).stopVideo(); 

此解决scheme简单,优雅,适用于所有浏览器:

 var video = $("#playerid").attr("src"); $("#playerid").attr("src",""); $("#playerid").attr("src",video); 

1.include

 <script type="text/javascript" src="http://www.youtube.com/player_api"></script> 

2.添加你的YouTube的iframe。

 <iframe id="player" src="http://www.youtube.com/embed/YOURID?rel=0&wmode=Opaque&enablejsapi=1" frameborder="0"></iframe> 

3.魔力时间。

  <script> var player; function onYouTubePlayerAPIReady() {player = new YT.Player('player');} //so on jquery event or whatever call the play or stop on the video. //to play player.playVideo(); //to stop player.stopVideo(); </script> 

我以前有过这个问题,我得出的结论是,在IE中停止video的唯一方法是将其从DOM中删除。

开始video

 var videoURL = $('#playerID').prop('src'); videoURL += "&autoplay=1"; $('#playerID').prop('src',videoURL); 

停止video

 var videoURL = $('#playerID').prop('src'); videoURL = videoURL.replace("&autoplay=1", ""); $('#playerID').prop('src',''); $('#playerID').prop('src',videoURL); 

您可能希望将“&autoplay = 1”replace为“?autoplay = 1”,因为没有其他参数

适用于FF和Chrome上的vimeo和youtube

我面临同样的问题。 经过很多的select我所做的只是重置embeddedsrc =“”与相同的URL。

代码片段:

  $("#videocontainer").fadeOut(200);<br/> $("#videoplayer").attr("src",videoURL); 

当我隐藏时,我至less能够停止播放video。:-)

我的解决scheme适用于现代YouTube embed格式,如下所示。

假设您的video正在播放的iframe具有id="#video" ,那么这个简单的Javascript就可以完成这项工作。

 $(document).ready(function(){ var stopVideo = function(player) { var vidSrc = player.prop('src'); player.prop('src', ''); // to force it to pause player.prop('src', vidSrc); }; // at some appropriate time later in your code stopVideo($('#video')); }); 

我已经看到了涉及使用YouTube API这个问题的解决scheme,但是如果您的网站不是https网站,或者您的video是使用YouTube推荐的现代格式embedded的,或者您设置了no-cookies选项,那么这些解决scheme不起作用 ,你会得到“ 电视机死亡频道 ”的效果,而不是你的video。

我已经在每个可以打开的浏览器上testing了上面的内容,它的工作非常可靠。

不幸的是,如果object标签的id属性不存在,那么play / stop / pauseVideo()不能被IE使用。

 <object style="display: block; margin-left: auto; margin-right: auto;" width="425" height="344" data="http://www.youtube.com/v/7scnebkm3r0&amp;fs=1&amp;border=1&amp;autoplay=1&amp;enablejsapi=1&amp;version=3" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="allowfullscreen" value="true" /> <param name="src" value="http://www.youtube.com/v/7scnebkm3r0&amp;fs=1&amp;border=1&amp;autoplay=1&amp;enablejsapi=1&amp;version=3" /> </object> <object id="idexists" style="display: block; margin-left: auto; margin-right: auto;" width="425" height="344" data="http://www.youtube.com/v/pDW47HNaN84&amp;fs=1&amp;border=1&amp;autoplay=1&amp;enablejsapi=1&amp;version=3" type="application/x-shockwave-flash"> <param name="allowscriptaccess" value="always" /> <param name="allowFullScreen" value="true" /> <param name="src" value="http://www.youtube.com/v/pDW47HNaN84&amp;fs=1&amp;border=1&amp;autoplay=1&amp;enablejsapi=1&amp;version=3" /> </object> <script> function pauseVideo() { $("object").each ( function(index) { obj = $(this).get(0); if (obj.pauseVideo) obj.pauseVideo(); } ); } </script> <button onClick="pauseVideo();">Pause</button> 

尝试一下!

那么,这样做有一个更简单的方法。 当你抓取YouTubevideo的embedded链接,向下滚动一下,你会看到一些选项:embedded的iFrame,使用旧的embedded,相关的video等在那里,select使用旧的embedded链接。 这解决了这个问题。

这对YouTube和Vimeo玩家都适用。 我基本上只是重置src属性,所以请注意video将回到开始。

 var $theSource = $theArticleDiv.find('.views-field-field-video-1 iframe').attr('src'); $theArticleDiv.find('.views-field-field-video-1 iframe').attr('src', $theSource); //reset the video so it stops playing 

$ theArticleDiv是我当前的video容器 – 因为我在页面上有多个video,并且它们在运行时通过Drupal视图公开,所以我不知道它们的id是什么。 所以我已经将muy单击事件绑定到一个当前可见的元素,find它的父元素,并决定这是$ theArticleDiv。

('.views-field-field-video-1 iframe')为我find了当前video的iframe – 特别是现在可见的。 该iframe具有src属性。 我只是select它并将其重置回原来的状态,然后自动停止video并返回到开始状态。 如果我的用户想要暂停和恢复,当然他们可以在不closuresvideo的情况下做到这一点 – 但坦率地说,如果他们closures了video,我觉得他们可以忍受重新开始的事实。

HTH

我得到这个工作在所有的现代浏览器,包括IE9 | IE8 | IE7。 以下代码将以jQuery UI对话框模式打开您的YouTubevideo,在对话框打开时从0:00开始自动播放video,并在closures对话框时停止video。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("swfobject", "2.1"); function _run() { /* YouTube player embed for modal dialog */ // The video to load. var videoID = "INSERT YOUR YOUTUBE VIDEO ID HERE" // Lets Flash from another domain call JavaScript var params = { allowScriptAccess: "always" }; // The element id of the Flash embed var atts = { id: "ytPlayer" }; // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/) swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "?version=3&enablejsapi=1&playerapiid=player1&autoplay=1", "videoDiv", "879", "520", "9", null, null, params, atts); } google.setOnLoadCallback(_run); $(function () { $("#big-video").dialog({ autoOpen: false, close: function (event, ui) { ytPlayer.stopVideo() // stops video/audio on dialog close }, modal: true, open: function (event, ui) { ytPlayer.seekTo(0) // resets playback to beginning of video and then plays video } }); $("#big-video-opener").click(function () { $("#big-video").dialog("open"); return false; }); }); </script> <div id="big-video" title="Video"> <div id="videoDiv">Loading...</div> </div> <a id="big-video-opener" class="button" href="#">Watch the short video</a> 

其实你只需要JavaScript,并使用swfobject谷歌库正确地build立YouTubevideo的embedded

这是一个例子

 <script type="text/javascript" src="swfobject.js"></script> <div style="width: 425; height: 356px;"> <div id="ytapiplayer"> You need Flash player 8+ and JavaScript enabled to view this video. </div> <script type="text/javascript"> var params = { allowScriptAccess: "always" }; var atts = { id: "myytplayer" }; swfobject.embedSWF("http://www.youtube.com/v/y5whWXxGHUA?enablejsapi=1&playerapiid=ytplayer&version=3", "ytapiplayer", "425", "356", "8", null, null, params, atts); </script> </div> 

之后,你可以调用这个函数:

 ytplayer = document.getElementById("myytplayer"); ytplayer.playVideo(); ytplayer.pauseVideo(); ytplayer.stopVideo(); 

我花了一点时间来研究这个,但是我已经解决了这个跨浏览器的实现:

HTML

 <div class="video" style="display: none"> <div class="mask"></div> <a href="#" class="close-btn"><span class="fa fa-times"></span></a> <div class="overlay"> <iframe id="player" width="100%" height="70%" src="//www.youtube.com/embed/Xp697DqsbUU" frameborder="0" allowfullscreen></iframe> </div> </div> 

jQuery的

 $('.launch-video').click(function() { $('.video').show(); $("#player").attr('src','//www.youtube.com/embed/Xp697DqsbUU'); }); $('.close-btn').click(function() { $('.video').hide(); $("#player").attr('src',''); }); 

它基本上是做的是打开我的灯箱和填充我的src属性,并closures,只是删除src值(然后重新填充它打开)。

如果你在iframe src中有自动播放属性,它不会帮助重新加载src attr / prop,所以你必须将autoplay = 1replace为autoplay = 0

  var stopVideo = function(player) { var vidSrc = player.prop('src').replace('autoplay=1','autoplay=0'); player.prop('src', vidSrc); }; stopVideo($('#video')); 

如果您有时使用playerID.stopVideo(); 不工作,这是一个骗局,

  function stopVideo() { playerID.seekTo(0); playerID.stopVideo(); } 

那么简单

在函数中包含以下行来closurespop。

 $('#youriframeid').remove();