javascript - 滚动到时自动播放youtube视频(使用youtube api)

Question

当视频在屏幕上(滚动到)时，是否可以自动播放youtube视频？

我在网站上看到一个部分，如下所示:

<!-- Home -->
    <section id="home" class="container relative pattern-black">
        <!-- Ful Screen Home -->
        <div id="fullscreen" class="fullscreen pattern-black soft-bg-1 z-1">
            <!-- Video -->
            <div id="P2" class="player video-container" data-property="{videoURL:'gpSSGCf9nHY',containment:'#fullscreen',autoPlay:true, showControls:true, mute:false, startAt:0, opacity:0.2}"></div>
            <!-- End Video -->
        </div>
        <!-- End Ful Screen Home -->

        <!-- Home Elements v2 -->
        <div class="home-elements">
            <!-- Home Inner -->
            <div class="home-inner v2 t-center">

                <!-- Home Text Slider -->
                <div class="home-text-slider relative">
                    <div class="text-slider clearfix">
                        <!-- Home Text Slides -->
                        <ul class="home-texts clearfix t-center semibold">
                            <li class="slide white uppercase">we are create awesome themes!</li>
                            <li class="slide white uppercase">We are creative designers</li>
                            <li class="slide white uppercase">we love to designing</li>
                        </ul>
                        <!-- End Home Text Slides -->
                        <!-- Home Fixed Text -->
                <h1 class="home-fixed-text t-center">Welcome to <span class="gray-tone">North!</span> We love to design. We are happy with <span class="gray-tone">you are !</span></h1>
                    </div>
                </div>
                <!-- End Home Text Slider -->

                <!-- Home Button -->
                <a href="#" target="_blank" class="home-button-1 uppercase oswald semibold gray">
                    purchase
                </a>

                <!-- Home Button -->
                <a href="#about" class="scroll home-button-1 uppercase oswald semibold gray">
                    read more
                </a>
            </div><!-- End Home Inner -->
        </div><!-- End Home Elements -->
    </section><!-- End Home Section -->

这是用于视频(jquery.mb.YTPlayer.js)的代码:

http://jsfiddle.net/55omdr0o/

Answer 1

我找到了一种方法。

使用jQuery Waypoint插件，您可以检测到用户何时滚动到某个元素。

带有视频的div的ID为“P2”，因此我将此代码添加到了带有视频的页面中:

<script>
// Use waypoints.min.js to detect if the user is at div with id P2
$(function() {
    $('#P2').waypoint(function() {
        $('#P2').playYTP();
    });
}); 
</script>

您可以在此处找到路标: https://github.com/imakewebthings/jquery-waypoints