在父元素的悬停出口动态实例化/暂停Youtube视频(iFrame API)
Dynamically instantiating/pausing Youtube video (iFrame API) on hover exit of parent element?
我正在制作一个大型菜单类型导航栏的原型。它的工作方式是，某人滚动一个主菜单项，然后出现一个大的下拉部分。
我还想包括在下拉部分中嵌入Youtube视频的能力。我的问题是，当包含视频的下拉部分退出时，视频将继续在后台播放。
我遇到的问题是，我似乎无法弄清楚如何动态实例化，获取和暂停视频在一个打开的下拉菜单。
我已经通读了API文档，我已经看到了YT.Player对象的手动实例化，但我理想地希望动态地做到这一点，并能够暂停给定的YT.Player实例。
I DO NOT只想删除iFrame的源并将其重新分配给iFrame。这只会创建更多HTTP请求。
这是目前为止我的小提琴。我的代码: HTML:
<ul id="mainNav">
<li>
<a href="#">Nav</a>
<div class="secondaryNav">
<div class="subnavFeature"><img width="200" src="http://www.designcrowd.com/img/blog/google.png"></div>
<div class="left">
<p><a href="#">Item 1</a></p>
<p><a href="#">Item 2</a></p>
</div>
</div>
</li>
<li>
<a href="#">Nav</a>
<div class="secondaryNav">
<div class="subnavFeature"><img width="200" src="http://www.designcrowd.com/img/blog/google.png"></div>
<p><a href="#">Item 1</a></p>
<p><a href="#">Item 2</a></p>
<p><a href="#">Item 3</a></p>
</div>
</li>
<li>
<a href="#">Nav</a>
<div class="secondaryNav">
<div class="subnavFeature"><img width="200" src="http://www.designcrowd.com/img/blog/google.png"></div>
<p><a href="#">Item 1</a></p>
<p><a href="#">Item 2</a></p>
<p><a href="#">Item 3</a></p>
<p><a href="#">Item 4</a></p>
<p><a href="#">Item 5</a></p>
</div>
</li>
<li>
<a href="#">Nav</a>
<div class="secondaryNav">
<div class="subnavFeature"><img width="200" src="http://www.designcrowd.com/img/blog/google.png"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, nesciunt, doloremque ratione officia voluptate placeat recusandae totam libero explicabo magnam labore a delectus commodi dolor iusto quae atque ipsum aliquid!</p>
</div>
</li>
<li>
<a href="#">Nav</a>
<div class="secondaryNav">
<div class="subnavFeature"><iframe id="trainingYTVideo" class="youtubeVideo" width="560" height="315" src="http://www.youtube.com/embed/3f7l-Z4NF70?enablejsapi=1" frameborder="0" allowfullscreen></iframe></div>
<p><a href="#">Item 1</a></p>
</div>
</li>
<li>
<a href="#">Nav</a>
<div class="secondaryNav">
<div class="subnavFeature"><img width="200" src="http://www.designcrowd.com/img/blog/google.png"></div>
<p><a href="#">Item 1</a></p>
<p><a href="#">Item 2</a></p>
<p><a href="#">Item 3</a></p>
</div>
</li>
</ul>
#mainNav{width: 960px; position: relative; padding: 0; margin: 0;}
#mainNav > li { float: left; width:120px; padding:0 20px; height:30px; background: #ccc; list-style: none;}
#mainNav > li:nth-child(2n) {background: #ddd;}
#mainNav > li:hover{background: #eee;}
#mainNav .secondaryNav{ display: none; position:absolute; width: 940px; left:0; top: 30px; background:#eee; padding: 10px;}
.subnavFeature{float: left; padding: 10px;}
.left{float: left;}
:
// jQuery 1.9.1
$(function(){
$('#mainNav > li').hover(
function(){
$(this).find('.secondaryNav').stop(true, true).fadeIn(200);
},
function(){
$(this).find('.secondaryNav').stop(true, true).fadeOut(200, function(){
var videos = $(this).find('.youtubeVideo');
if( videos.length > 0 ){
// pause each video
}
});
}
);
});
TL;DR:如何在打开的下拉菜单中动态实例化，获取和暂停视频?
我最后是这样做的:
JS
var youtubeVideo1,
youtubeVideo2,
youtubeVideo3,
youtubeVideos;
function onYouTubeIframeAPIReady() {
youtubeVideo1 = new YT.Player('youtubeVideo1');
youtubeVideo2 = new YT.Player('youtubeVideo2');
youtubeVideo3 = new YT.Player('youtubeVideo3');
youtubeVideos = [youtubeVideo1, youtubeVideo2, youtubeVideo3];
}
$(function () {
$('#mainNav > li').hover(
function () {
$(this).find('.secondaryNav').stop(true, true).fadeIn(200);
},
function () {
$(this).find('.secondaryNav').stop(true, true).fadeOut(200, function () {
// var youtubeVideos = $(this).find('.youtubeVideo');
if (youtubeVideos.length > 0) {
$.each(youtubeVideos, function(){
this.pauseVideo();
});
}
});
});
});