twitter-bootstrap Bootstrap Carousel 中的 Youtube iframes - 在幻灯片上停止视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17514403/
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
Youtube iframes in Bootstrap Carousel - stop video on slide
提问by scientiffic
I have a bunch of Carousels on a page, each with a mix of videos and images. I'd like to stop Youtube videos from playing when the user exits a video by clicking one of the carousel controls (left or right).
我在一个页面上有一堆旋转木马，每个旋转木马都有视频和图像的混合。当用户通过单击轮播控件之一（向左或向右）退出视频时，我想停止播放 Youtube 视频。
I'd like to be able to detect when the user clicks the controls, create a player based on the current video that was playing, and turn that video off. In the other examples I've seen, the players were declared in the onYoutubeIframeAPIReady function, but I thought it would be better not to dynamically create players for every video on the page. Right now, I'm getting the error
我希望能够检测到用户何时单击控件，根据正在播放的当前视频创建一个播放器，然后关闭该视频。在我看到的其他示例中，播放器是在 onYoutubeIframeAPIReady 函数中声明的，但我认为最好不要为页面上的每个视频动态创建播放器。现在，我收到错误
Uncaught TypeError: Object #<T> has no method 'stopVideo'
when I click the carousel controls. However, if I type
当我单击轮播控件时。但是，如果我输入
player.stopVideo();
in the Chrome javascript console, it works fine. What am I doing wrong?
在 Chrome javascript 控制台中，它工作正常。我究竟做错了什么？
<script>
var youtubeReady = false;
function onYouTubeIframeAPIReady(){
youtubeReady = true;
}
$('.carousel').on('slide', function(){
if(youtubeReady){
console.log("setting player");
var iframeID = $(this).find('.active').find('iframe').attr("id");
player = new YT.Player(iframeID);
player.stopVideo();
}
});
</script>
Example carousel:
示例轮播：
<div class="mainPhoto carousel slide 523" id="carousel-523">
<div class="carousel-inner 523">
<div class="item active">
<div class="flex-video">
<a class="fancybox" href="http://www.youtube.com/embed/4pEqbs0ISaw?version=3&enablejsapi=1" rel="gallery 523" data-fancybox-type="iframe">
<iframe src="http://www.youtube.com/embed/4pEqbs0ISaw?version=3&enablejsapi=1" id="1188">
</iframe>
</a>
</div>
</div>
<div class="item">
<a class="fancybox" href="https://buildinprogress.s3.amazonaws.com/image/image_path/1189/2013-07-05_19.47.55.jpg" rel="gallery 523" data-fancybox-type="image">
<img alt="Preview_2013-07-05_19.47.55" id="1189" src="https://buildinprogress.s3.amazonaws.com/image/image_path/1189/preview_2013-07-05_19.47.55.jpg" width="100%">
</a>
</div>
</div>
<a class="carousel-control left" href="#carousel-523" data-slide="prev" style="display: none;">?</a>
<a class="carousel-control right" href="#carousel-523" data-slide="next" style="display: none;">?</a>
</div>
采纳答案by scientiffic
I ended up using the callPlayer function here (which didn't require using the youtube API at all):
我最终在这里使用了 callPlayer 函数（根本不需要使用 youtube API）：
YouTube iframe API: how do I control a iframe player that's already in the HTML?
