javascript - jQuery 滚动播放下一个视频

Question

我正在构建一个页面，该页面具有彼此堆叠的动态加载部分，每个部分可以包含图像或视频。我想构建这样的功能:当用户滚动浏览视频时，浏览器将播放当前正在查看的视频。

页面可能如下所示:

-----------------
[     Header    ]
-----------------
[ Image Section ]   |
[ Image Section ]   |
[ Image Section ]   |
[ Video Section ]   <---- Scroll height a (play first video but not second)
[ Image Section ]   |
[ Image Section ]   |
[ Video Section ]   <---- Scroll height b (play second video but not first)
[ Image Section ]   | 
-----------------
[     Footer    ]
-----------------

我的问题是，每个视频部分都由同一个类'.section_video'标识，我知道我可以为每个部分分配唯一的标识符，但如果有办法处理它如果不这样做那就太好了。

目前，为了检测我是否在 View 中，我使用以下代码:

 // Checks whether our top offset finds the video container
 function isScrolledIntoView(elem){
     var docViewTop = $(window).scrollTop();
     var docViewBottom = docViewTop + $(window).height();

     var elemTop = $(elem).offset().top;
     var elemBottom = elemTop + $(elem).height();

     return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
         && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
 }

 // Check whether the player div has been scrolled into view
 function checkIfVideoInView(){
     var player = $('.section_video .video_column video');

     // If true was returned, play the video
     if ( isScrolledIntoView(player) ) {
         player.get(0).play();
     }
 }

 window.onscroll = checkIfVideoInView;

我尝试使用 $(this).(elem) 作为选择器，因为我认为它会抓取 View 中的当前元素，但控制台提示该元素未定义。

有人能给我指出正确的方向吗？或者我应该在页面加载时将唯一标识符绑定(bind)到每个视频吗？

Answer 1

我认为你应该使用$(elem).each()并检查所有视频元素。像这样的东西:

$(window).scroll(function() {
    $('.myVid').each(function() {
        if(isInView(this)) {
            this.play();
        } else {
            this.pause();
        }
    });
});

和函数:

function isInView(el) {
    windowTop = $(window).scrollTop();
    windowButtom = windowTop + $(window).height();
    elTop = $(el).offset().top;
    elButtom = elTop + $(el).height();

    return (elTop >= windowTop && elButtom <= windowButtom);
}

演示 http://jsfiddle.net/t52sz0rt/1/