javascript – 视口 – 用于在视口中查找元素的jQuery选择器

在我的项目中,每个div都有一个视频,所以我试图检查一个div是否在视口中,所以如果是该视频开始播放,如果它不是暂停或停止.我是jusing jekyll.
例如,我只有一个div的HTML代码如下所示：

<div class="container">
            <div class="row">
            <input type="button" id="play" value="Play"></input>
            <input type="button" id="pause" value="Pause"></input>
            <br/><br/>
                <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
                    <hr class="section-heading-spacer">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Vjetersia</h2>
                    <div class="lead"><p class="justify"> Vjetersia</p></div>
                </div>
                <div class="col-lg-5 col-sm-pull-6  col-sm-6">
                  <div class="gifv-player" id="">
                    <video preload="none" loop="loop">
                        <source type="video/webm" src="all_files/1.webm" />
                    </video>
                    <img src="example.png" alt="Animated Gif" />
                </div>
                </div>
                <div class="col-lg-3 col-sm-pull-2  col-sm-2"></div>
            </div>
        </div>

我尝试按下按钮并执行它：

$( document ).ready(function() {
        player = new GifvPlayer();
        $("#play").click(function() {
            $('.gifv-player').find('video').show();
            $('.gifv-player').find('video')[0].play();
        });
        $("#pause").click(function() {
            $('.gifv-player').find('video')[0].pause();
        });
    });

但我如何修改它,以便它可以漫步,如果div可见,开始播放其视频？有帮助吗？

解决方法

如何实现它的简单快速和肮脏的例子.像改变div的颜色一样播放/暂停… http://jsfiddle.net/7mkdj4ak/1/

var scrollPosition = $(window).scrollTop();
var windowViewHeight = $(window).height();
var videoWrapHeight = $('.container').outerHeight();

$(window).on('scroll',function(){
    scrollPosition = $(window).scrollTop();
    playVideos(scrollPosition);
});

$(window).on('resize',function(){
    windowViewHeight = $(window).height();
});


var playVideos = function(scrollPosition) {
    $('.container').each(function(i){
        var thisContainerTopPosition = $(this).offset().top;
        var thisContainerBottomPosition = thisContainerTopPosition + videoWrapHeight;
        if( 
            thisContainerTopPosition >= scrollPosition && 
            thisContainerBottomPosition <= (scrollPosition + windowViewHeight ) 
        ) {
            /* div is in view PLaY */
            $(this).css('background-color','orange');
        } else {
            /* div is out of view PausE */
            $(this).css('background-color','#afafaf');
        }
    });
};


playVideos(scrollPosition);

.container {
        width: 100%;
        height: 100px;
        background-color: #afafaf;
        margin: 20px 0;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="container">
        <h1>my Video 1</h1>
    </div>
    <div class="container">
        <h1>my Video 2</h1>
    </div>
    <div class="container">
        <h1>my Video 3</h1>
    </div>
    <div class="container">
        <h1>my Video 4</h1>
    </div>