Javascript 使用 jquery 停止 YouTube 视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2128535/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop a youtube video with jquery?
提问by wesbos
I have a jquery slider that I have built, basically just three pannels that slide by applying negative left CSS values. Works great, but I have a youtube video in one slide that wont stop when I slide. I've tried display:none and Visibility:hidden which works in all but IE, the audio keeps going in IE.
我有一个我已经构建的 jquery 滑块，基本上只有三个通过应用负左 CSS 值来滑动的面板。效果很好，但我在一张幻灯片中有一个 youtube 视频，当我滑动时它不会停止。我试过 display:none 和 Visibility:hidden ，它在除 IE 之外的所有环境中都有效，音频在 IE 中继续播放。
Is there an easy way to kill a video with jquery?
有没有一种简单的方法可以用 jquery 杀死视频？
采纳答案by cobbal
回答by HeyTiger
This solution is simple, elegant and works in all browsers:
此解决方案简单、优雅且适用于所有浏览器：
var video = $("#playerid").attr("src");
$("#playerid").attr("src","");
$("#playerid").attr("src",video);
回答by Chris Wheaton
1.include
1.包含
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
2.add your youtube iframe.
2.添加你的youtube iframe。
<iframe id="player" src="http://www.youtube.com/embed/YOURID?rel=0&wmode=Opaque&enablejsapi=1" frameborder="0"></iframe>
3.magic time.
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>
回答by Faiz Mohamed Haneef
To start video
开始视频
var videoURL = $('#playerID').prop('src');
videoURL += "&autoplay=1";
$('#playerID').prop('src',videoURL);
To stop video
停止视频
var videoURL = $('#playerID').prop('src');
videoURL = videoURL.replace("&autoplay=1", "");
$('#playerID').prop('src','');
$('#playerID').prop('src',videoURL);
You may want to replace "&autoplay=1" with "?autoplay=1" incase there are no additional parameters
如果没有其他参数，您可能希望将“&autoplay=1”替换为“?autoplay=1”
works for both vimeo and youtube on FF & Chrome
适用于 FF 和 Chrome 上的 vimeo 和 youtube
回答by Felix
I've had this problem before and the conclusion I've come to is that the only way to stop a video in IE is to remove it from the DOM.
我以前遇到过这个问题，我得出的结论是，在 IE 中停止视频的唯一方法是将其从 DOM 中删除。
回答by HymanSparrow
I was facing the same problem. After a lot of alternatives what I did was just reset the embed src="" with the same URL.
我面临同样的问题。在做了很多选择之后，我所做的只是用相同的 URL 重置 embed src="" 。
Code snippet:
代码片段：
$("#videocontainer").fadeOut(200);<br/>
$("#videoplayer").attr("src",videoURL);
I was able to at least stop the video from playing when I hide it.:-)
当我隐藏它时，我至少能够停止播放视频。:-)
回答by Dave Sag
My solution to this that works for the modern YouTube embedformat is as follows.
我对此适用于现代 YouTubeembed格式的解决方案如下。
Assuming the iframeyour video is playing in has id="#video", this simple bit of Javascript will do the job.
假设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'));
});
I've seen proposed solutions to this issue involving use of the YouTube API, but if your site is not an httpssite, or your video is embedded using the modern format recommended by YouTube, or if you have the no-cookiesoption set, then those solutions don't workand you get the "TV set to a dead channel" effect instead of your video.
我见过提出的解决方案涉及使用的这个问题YouTube API，但如果你的网站是不是一个https网站，或视频使用由YouTube推荐的现代格式嵌入，或者如果你有no-cookies选择设置，然后这些解决方案不会工作，你会得到“电视机到死频道”的效果，而不是你的视频。
I've tested the above on every browser I could lay my hands on and it works very reliably.
我已经在我可以使用的每个浏览器上测试了上述内容，并且它非常可靠地工作。
回答by talsibony
if you have autoplay property in the iframe src it wont help to reload the src attr/prop so you have to replace the autoplay=1 to autoplay=0
如果您在 iframe src 中有 autoplay 属性，则重新加载 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'));
回答by Progz Killer
Unfortunately, if id attribute of object tag don't exists, the play/stop/pauseVideo() don't work by IE.
不幸的是，如果对象标签的 id 属性不存在，则播放/停止/暂停视频（）在 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>
Try it!
尝试一下！
回答by Sam Moore
This works for me on both YouTube and Vimeo players. I'm basically just resetting the src attribute, so be aware that the video will go back to the beginning.
这对我在 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 is my current video's container - since I have multiple videos on the page, and they're being exposed via a Drupal view at runtime, I have no idea what their ids are going to be. So I've bound muy click event to a currently visible element, found its parent, and decided that's $theArticleDiv.
$theArticleDiv 是我当前视频的容器 - 因为我在页面上有多个视频，并且它们在运行时通过 Drupal 视图公开，我不知道它们的 id 将是什么。所以我将多个点击事件绑定到一个当前可见的元素，找到它的父元素，并决定它是 $theArticleDiv。
('.views-field-field-video-1 iframe') finds the current video's iframe for me - in particular the one that's visible right now. That iframe has a src attribute. I just pick that up and reset it right back to what it already was, and automagically the video stops and goes back to the start. If my users want to pause and resume, they can do it without closing the video, of course - but frankly if they do close the video, I feel they can live with the fact that it's reset to the start.
('.views-field-field-video-1 iframe') 为我找到当前视频的 iframe - 特别是现在可见的 iframe。该 iframe 有一个 src 属性。我只是拿起它并将其重新设置回原来的状态，然后视频会自动停止并返回到开头。如果我的用户想要暂停和恢复，他们当然可以在不关闭视频的情况下进行 - 但坦率地说，如果他们关闭视频，我觉得他们可以接受它被重置为开始的事实。
HTH
HTH
