jQuery播放下一个视频上的滚动

jQuery play next video on scroll

本文关键字：滚动 视频 播放 下一个 jQuery      更新时间：2023-09-26

我正在构建一个页面，其中动态加载的部分堆叠在一起，每个部分可以包含图像或视频。我想建立的功能，当用户滚动过去的视频，浏览器将播放其中一个是目前的看法。

一个页面可能看起来像:

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

有没有人可以指出我在正确的方向，或者我应该绑定唯一的标识符到每个视频页面加载?

我认为你应该使用$(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/

相关文章：