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'标识，我知道我可以为每个部分指定唯一标识符，但是如果有办法处理它而不这样做会很棒的。

目前，为了检测我是否在视野中，我使用此代码：

 // 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)作为选择器，因为我认为它会抓取视图中的当前元素，但是控制台提示元素未定义。

有人能指出我正确的方向，还是应该在页面加载时为每个视频绑定唯一标识符？

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/

jQuery在滚动播放下一个视频

1 个答案: