0

我正在开发一个大型菜单类型导航栏的原型。它的运作方式是有人滚动主菜单项，然后出现大的下拉部分。

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

我遇到的问题是我似乎无法弄清楚如何在打开的下拉菜单中动态实例化、获取和暂停视频。

我已经通读了API 文档，并且看到了YT.Player对象的手动实例化，但理想情况下我希望动态地执行此操作并能够暂停给定的YT.Player实例。

我不想只删除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>

CSS：

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

JS：

// 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：如何在打开的下拉菜单中动态实例化、获取和暂停视频？

4

2 回答 2

0

这就是我最终做的事情：

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

于 2013-06-18T22:20:35.020 回答
-1

您没有以正确的方式使用 youtube js api。为了让您的工作更轻松，我建议您包含这个小插件，然后您将加载您的视频，例如：

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

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

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

注意：您不需要从 youtube 加载其他内容。一切都在这里完成，你只需要这样称呼它$('.youtubeVideo').ntzYoutubeEmbed();

于 2013-06-18T21:11:16.747 回答