Question

在我的项目中，每个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可以开始播放它的视频？有什么帮助吗？

Answer 1

简单快捷的示例如何实现它。播放/暂停，例如更改div s ... http://jsfiddle.net/7mkdj4ak/1/

的颜色

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以参考此演示

./configure --without-xpath

DEMO HERE

Viewport - 用于在视口中查找元素的jQuery选择器

2 个答案: