Question

我正在研究一个巨型菜单类型导航栏的原型。它运行的方式是有人滚动主菜单项，并出现大的下拉部分。

我还希望能够在下拉部分中包含嵌入Youtube视频的功能。我的问题是，当退出包含视频的下拉部分时，视频将继续在后台播放。

我遇到的问题是我似乎无法弄清楚如何在开放式下拉列表中动态实例化，获取和暂停视频。

我已经阅读了API documentation并且我已经看到了YT.Player对象的手动实例化，但我理想情况下想要动态地执行此操作并且能够暂停给定{{1}实例。

我不要想要删除iFrame的来源并将其重新分配回iFrame。这只会创建更多的HTTP请求。

到目前为止，这是我的fiddle。我的代码：

HTML：

YT.Player

CSS：

<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>

JS：

#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;}

TL; DR：如何在打开的下拉列表中动态实例化，获取和暂停视频？

Answer 1

这是我最终做的事情：

<强> 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();
                });
            }
        });
    });
});

<强> 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"><iframe id="youtubeVideo1" width="560" height="315" src="http://www.youtube.com/embed/sERJZ5KJHz0?enablejsapi=1" frameborder="0" allowfullscreen></iframe></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="youtubeVideo2" 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>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, molestiae vel consequuntur tempora optio aut saepe eum perferendis. Atque, debitis, veniam iste vero voluptatibus amet omnis ducimus commodi labore reiciendis.</p>
        </div>
    </li>
    <li>
        <a href="#">Nav</a>
        <div class="secondaryNav">
            <div class="subnavFeature"><iframe id="youtubeVideo3" class="youtubeVideo"  width="560" height="315" src="http://www.youtube.com/embed/RmMojHCPMJ4?enablejsapi=1" frameborder="0" allowfullscreen></iframe></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>

我指望此导航栏中任何时候都没有超过6个视频。

Answer 2

您没有以正确的方式使用youtube js api。为了方便您的工作，我建议您添加small plugin，然后您将加载以下视频：

<div class="youtubeVideo" data-youtube-id="3f7l-Z4NF70"></div>

如果你的小提琴看起来像：

if( videos.length > 0 ) {
  $('.youtubeVideo', this).trigger('player-stop');
}

注意：您无需从youtube加载其他内容。一切都在这里完成，您只需将其称为$('.youtubeVideo').ntzYoutubeEmbed();

在父元素的悬停退出时动态实例化/暂停Youtube视频（iFrame API）？

2 个答案: