用 jquery 停止 youtube 视频？
Posted
技术标签:
【中文标题】用 jquery 停止 youtube 视频？【英文标题】：Stop a youtube video with jquery? 【发布时间】：2011-01-08 20:52:16 【问题描述】：我有一个我已经构建的 jquery 滑块，基本上只有三个通过应用负左 CSS 值来滑动的面板。效果很好，但我在一张幻灯片中有一个 youtube 视频，当我滑动时不会停止。我尝试了 display:none 和 Visibility:hidden，它们在除 IE 之外的所有设备中都可以使用，音频在 IE 中继续播放。
有没有一种简单的方法可以用 jquery 杀死视频？
【问题讨论】：
我没有使用任何 api..只是 iframe ...我怎样才能阻止它？ 在下面的链接***.com/a/32822713/1716053查看我的解决方案 这个简单的解决方案仍然有效：***.com/questions/14136566/… 【参考方案1】：此解决方案简单、优雅，适用于所有浏览器：
var video = $("#playerid").attr("src");
$("#playerid").attr("src","");
$("#playerid").attr("src",video);
【讨论】：
很棒的解决方案，如果您不介意重置视频，则可以完美运行。 这对我来说非常有效。我尝试了此页面上的其他解决方案，但由于 http 和 https 不匹配，它们中的任何一个都无法正常工作。 这个解决方案的惊人之处在于，在它提出建议后我才使用了 3 年多，而且它仍然是我发现实施的最简单的一个。 这是迄今为止我发现的最优雅、最容易实施的解决方案，解决了同样困扰这个问题的问题。 6 小时的谷歌搜索和反复试验，然后我找到了这个宝石。我认为这对人们不起作用的唯一原因是他们是否需要暂停视频。 大家好。我似乎无法让这个工作，据我所知，这是因为模态代码在我添加此代码的位置下方打开。我已经包含了关于结束 标记的代码，但是当我单击链接以激活弹出窗口时，生成的模式代码会在粘贴的 JS 代码下方触发。有谁知道为什么会这样？【参考方案2】：来自API docs：
player.stopVideo()
所以在 jQuery 中：
$('#playerID').get(0).stopVideo();
【讨论】：
哇，这么简单？我的玩家 ID 是什么？ 其实，它似乎比我最初想象的要复杂。它需要 Flash 8+，并且您需要将“&enablejsapi=1”添加到 url。然后你要弄清楚是调用embed标签还是object标签上的函数 我无法让它工作。为什么你必须在这个例子中使用 .get(0) ？同样令人困惑的是，在code.google.com/apis/youtube/chromeless_example_1.html 的示例中 - 在控制视频的链接上调用的方法是 停止。所以它使用“stop();”而不是“stopVideo();”。不过，我都无法工作。 @Mike 我不确定 stop 和 stopVideo 之间的区别。.get(0) 是从 jQuery 对象中获取一个 DOM 元素。
很棒的解决方案。对 wesbos：PlayerID 不是 youtube iframe 的 ID，而是围绕 youtube iframe 的 div。例如 - 【参考方案3】：
1.包括
<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>
【讨论】：
我试过了，元素'player.stopVideo()' 回来了，因为没有定义。我错过了什么？ 您是否包含了脚本标签，并且是否已将“&enablejsapi=1”添加到您的 iframe src 中？ 关闭 YouTube 播放器最自然的方法似乎是使用 YouTube API。在许多已发布的答案中，这个特定的答案正是这样做的。【参考方案4】：开始视频
var videoURL = $('#playerID').prop('src');
videoURL += "&autoplay=1";
$('#playerID').prop('src',videoURL);
停止视频
var videoURL = $('#playerID').prop('src');
videoURL = videoURL.replace("&autoplay=1", "");
$('#playerID').prop('src','');
$('#playerID').prop('src',videoURL);
如果没有其他参数，您可能需要将“&autoplay=1”替换为“?autoplay=1”
适用于 FF 和 Chrome 上的 vimeo 和 youtube
【讨论】：
感谢您的回答。 优秀答案【参考方案5】：我之前遇到过这个问题，我得出的结论是，在 IE 中停止视频的唯一方法是将其从 DOM 中删除。
【讨论】：
太好了，我能以某种方式再次添加它吗？ 你可以试试var playercopy = $(playerDiv).clone() 然后$(playerDiv).remove()
@cobbal：你可以做var $player = $(playerDiv).detach();【参考方案6】：
我也遇到了同样的问题。经过很多替代后，我所做的只是使用相同的 URL 重置嵌入 src=""。
代码sn-p：
$("#videocontainer").fadeOut(200);<br/>
$("#videoplayer").attr("src",videoURL);
当我隐藏它时，我至少能够停止播放视频。:-)
【讨论】：
谢谢！这对我有用，但是我有 10 个视频，并且我收到一个未定义 videoURL 的 js 错误，因此我将 videoURL 更改为“http/fuu?args”，并为每个视频 iframe 设置了唯一 ID。很高兴知道为什么 videoURL 不起作用。再次感谢！【参考方案7】：适用于现代 YouTube embed 格式的我的解决方案如下。
假设您的视频正在播放的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 的建议解决方案，但如果您的网站不是 https 网站，或者您的视频是使用 YouTube 推荐的现代格式嵌入的，或者如果您有no-cookies 选项集，然后那些解决方案不起作用，你会得到“电视机到死频道”效果而不是你的视频。
我已经在我可以接触到的每个浏览器上测试了上述内容，并且它工作得非常可靠。
【讨论】：
解决了我的问题，非常感谢！ （试图让 youtube 视频在用户移动到单页应用中的另一个“标签”后停止播放）【参考方案8】：如果您在 iframe src 中有自动播放属性，则重新加载将无济于事 src attr/prop 所以你必须将 autoplay=1 替换为 autoplay=0
var stopVideo = function(player)
var vidSrc = player.prop('src').replace('autoplay=1','autoplay=0');
player.prop('src', vidSrc);
;
stopVideo($('#video'));
【讨论】：
【参考方案9】：很遗憾，如果 object 标签的 id 属性不存在，则播放/停止/pauseVideo() 在 IE 中不起作用。
<object style="display: block; margin-left: auto; margin-right: auto;" 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;" 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>
试试吧！
【讨论】：
【参考方案10】：这对我有用
stopIframeVideo = () =>
let iframe = $('.video-iframe')
iframe.each((index) =>
iframe[index].contentWindow.postMessage('"event":"command","func":"' + 'stopVideo' + '","args":""', '*');
)
;
$('.close').click(() =>
stopIframeVideo()
);【讨论】：
【参考方案11】：嗯，有一种更简单的方法可以做到这一点。 当您获取 youtube 视频的嵌入链接时，向下滚动一下，您会看到一些选项： iFrame 嵌入、使用旧嵌入、相关视频等。 在那里，选择使用旧的嵌入链接。 这样就解决了问题。
【讨论】：
刚刚在 Windows XP 64bit IE8 和 Windows 7 64bit IE9 中测试。关闭/隐藏 div 后声音继续播放。 Alos 在 Snow Leopard FF 13 中不起作用。这在 Safari 5.1.7 和 Chrome 21 中有效。我知道这是一个旧答案，但我真的希望它能够工作。【参考方案12】：这在 YouTube 和 Vimeo 播放器上都适用于我。 我基本上只是在重置 src 属性，所以要注意视频会回到开头。
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 是我当前视频的容器 - 因为我在页面上有多个视频，并且它们在运行时通过 Drupal 视图公开，所以我不知道它们的 id 会是什么。所以我将 muy click 事件绑定到当前可见的元素，找到它的父元素，并确定它是 $theArticleDiv。
('.views-field-field-video-1 iframe') 为我找到当前视频的 iframe - 特别是现在可见的 iframe。 该 iframe 具有 src 属性。我只是拿起它并将其重新设置回原来的样子，然后视频会自动停止并回到开始。 如果我的用户想要暂停和恢复，他们当然可以在不关闭视频的情况下执行此操作 - 但坦率地说，如果他们确实关闭了视频，我觉得他们可以接受它被重置为开始的事实。
HTH
【讨论】：
【参考方案13】：我花了一些时间来寻找答案，但我已经确定了这个跨浏览器的实现：
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" 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 属性，然后在关闭时删除 src 值（然后在打开时重新填充它）。
【讨论】：
【参考方案14】：我让它适用于所有现代浏览器，包括 IE9|IE8|IE7。以下代码将以 jQuery UI 对话框模式打开您的 YouTube 视频，在对话框打开时从 0:00 自动播放视频，并在对话框关闭时停止视频。
<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>
【讨论】：
这比问题所要求的要多一点，如果您知道如何帮助解决具体问题，请简明扼要地回答如何做到这一点。 谁能告诉我如何使这个解决方案适用于 Internet Explorer？【参考方案15】：实际上您只需要 javascript 并使用 swfobject google library 正确构建 youtube 视频的嵌入
这是一个例子
<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();
【讨论】：
【参考方案16】：如果你有时使用 playerID.stopVideo();不起作用，这是一个技巧，
function stopVideo()
playerID.seekTo(0);
playerID.stopVideo();
【讨论】：
【参考方案17】：对于那些正在寻找 javascript 解决方案的人
let iframeDiv = document.getElementById('demoVideo');
let video = iframeDiv.src;
iframeDiv.src = "";
iframeDiv.src = video;
它对我来说非常有效，只需将 id='demoVideo' 放入您的 iframe 标记中，您就可以开始了 :)
【讨论】：
【参考方案18】：在嵌入网址末尾添加以下内容
?enablejsapi=1&version=3&playerapiid=ytplayer
例如 - https://www.youtube.com/embed/wR0jg0eQsZA?enablejsapi=1&version=3&playerapiid=ytplayer"
【讨论】：
【参考方案19】：就这么简单。
在函数中包含以下行来关闭弹出窗口。
$('#youriframeid').remove();
【讨论】：
您将删除整个元素，这不是您停止它的方式：D以上是关于用 jquery 停止 youtube 视频？的主要内容，如果未能解决你的问题，请参考以下文章
关闭手风琴 div 时停止播放 YouTube 视频 [重复]
jQuery - 带有视频的标签...当我在标签之间切换时如何让视频停止播放？
动态创建的 iFrame 上的 YouTube iFrame API