用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&fs=1&border=1&autoplay=1&enablejsapi=1&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&fs=1&border=1&autoplay=1&enablejsapi=1&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&fs=1&border=1&autoplay=1&enablejsapi=1&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&fs=1&border=1&autoplay=1&enablejsapi=1&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();
