当绝对值在相对值内时检测元素的位置答案

【问题标题】：Detecting a element's position when and absolute is inside a relative当绝对值在相对值内时检测元素的位置
【发布时间】：2014-08-23 11:59:32
【问题描述】：

请不要杀我，因为我确信以前有人问过这个问题，但是当我环顾四周时，对我来说没有任何意义。

基本上，当用户向下滚动查看视频时，我正在尝试使用下面的代码在我的网站上自动播放视频 - http://jsfiddle.net/pjoxqf80/1/

var videos = document.getElementsByTagName("video"),
fraction = 0.8;
function checkScroll() {

    for(var i = 0; i < videos.length; i++) {

        var video = videos[i];

        var x = video.offsetLeft, 
            y = video.offsetTop, 
            w = video.offsetWidth, 
            h = video.offsetHeight, 
            r = x + w, //right
            b = y + h, //bottom
            visibleX, 
            visibleY, 
            visible;

            visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
            visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

            visible = visibleX * visibleY / (w * h);

            if (visible > fraction) {
                video.play();
            } else {
                video.pause();
            }

    }

}

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);

但是，在我的页面上，video.js 播放器似乎将视频设为“绝对”定位，因此所有视频仅在用户滚动到页面顶部时播放，然后在用户向下滚动时暂停去看他们。我希望代码能够正确检测视频的位置。

我想删除“绝对”定位，但我使用的是 video.js CSS 文件的 CDN 版本，因此无法更改。我想我已经阅读了 jquery .offset 但不确定如何使用它？

这里是网站，向下滚动找到视频：

http://www.digital-soul.com.au/tcsite/our-journal-is-different/

【问题讨论】：

标签： javascript video video.js

【解决方案1】：

经过大量搜索，我终于找到了答案-

How to pause html5 video when out of view code (non-statically positioned)

代码应该像这样工作以正确检测视频-

var videos = document.getElementsByTagName("video"),
fraction = 0.8;
function checkScroll() {

    for(var i = 0; i < videos.length; i++) {

        var video = videos[i];

          var x = 0,
              y = 0,
              w = video.offsetWidth,
              h = video.offsetHeight,
              r, //right
              b, //bottom
              visibleX, visibleY, visible,
              parent;

            parent = video;
            while (parent && parent !== document.body) {
              x += parent.offsetLeft;
              y += parent.offsetTop;
              parent = parent.offsetParent;
            }

            r = x + w;
            b = y + h;

        //var x = video.offsetLeft, 
        //    y = video.offsetTop, 
        //    w = video.offsetWidth, 
        //    h = video.offsetHeight, 
        //   r = x + w, //right
        //    b = y + h, //bottom
        //    visibleX, 
        //    visibleY, 
        //    visible;

            visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
            visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

            visible = visibleX * visibleY / (w * h);

            if (visible > fraction) {
                video.play();
            } else {
                video.pause();
            }

    }

}

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);

【讨论】：