出现在窗口中间的视频如何播放？

Question

当任何特定视频出现在窗口/屏幕中间作为窗口/屏幕时，我正在尝试实现Instagram，Facebook，9GAG等视频自动播放系统正在滚动。因此，我想创建一个系统，其中页面上有许多video，并且当任何特定的video出现在窗口/屏幕中间时，应该设置src并开始播放{ {1}}并从前video个播放中删除src。我已经创建了自己的逻辑，但是只有在窗口缓慢滚动时，它才起作用。如果快速滚动窗口，它将丢失当前视频播放的记录。因此，我的逻辑不够好且效率不够。当video出现在窗口中间时，请帮助我建立更好的逻辑。

video

index.html:

window.onbeforeunload = function () {
    this.scrollTo(0, 0);
}

var content = document.getElementById("content"),
    video_player = undefined,
    current = 0;

for (var x=0;x<50;x++) {
    var video = document.createElement("video");
    video.controls = false;
    video.loop = true;
    video.autoplay = true;
    video.poster = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg";
    content.appendChild(video);
}

function scroll_function () {
    if (this.oldScroll > this.scrollY) {
        if (current >= 1) {
            var previous_player = content.children[current-1];
            if ((this.scrollY + this.innerHeight/2) < previous_player.offsetTop + previous_player.clientHeight) {
                video_player.removeAttribute("src");
                video_player.controls = false;
                video_player.load();
                current--;
                video_player = content.children[current];
                video_player.src = "https://dash.akamaized.net/akamai/bbb/bbb_640x360_60fps_1200k.mp4";
                video_player.controls = true;
                video_player.load();
            }
        }
    } else {
        if (current < 49) {
            var next_player = content.children[current+1];
            if ((this.scrollY + this.innerHeight/2) > next_player.offsetTop) {
                video_player.removeAttribute("src");
                video_player.controls = false;
                video_player.load();
                current++;
                video_player = content.children[current];
                video_player.src = "https://dash.akamaized.net/akamai/bbb/bbb_640x360_60fps_1200k.mp4";
                video_player.controls = true;
                video_player.load();
            }
        }
    }
    this.oldScroll = this.scrollY;
}
window.addEventListener("scroll", scroll_function);

video_player = content.children[current];
video_player.src = "https://dash.akamaized.net/akamai/bbb/bbb_640x360_60fps_1200k.mp4";
video_player.controls = true;
video_player.load();

body {
    margin: 0;
}
#content {
    height: 100%;
    width: 75%;
    margin-left: 12.5%;
}
video {
    width: 100%;
    height: 500px;
}

---

Answer 1

现在您只需要验证视频是否在屏幕中央，就可以了

window.onbeforeunload = function () {
    this.scrollTo(0, 0);
}

var content = document.getElementById("content"),
    video_player = undefined,
    current = 0;

for (var x=0;x<50;x++) {
    var video = document.createElement("video");
    video.controls = false;
    video.loop = true;
    video.autoplay = true;
    video.poster = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg";
    content.appendChild(video);
}
var timeout;
var previous_player;
function scroll_function () {
    var $this = this;
    var previous_player = content.children[current];
    window.clearTimeout(timeout); // this is to clear all previews operation
    timeout = setTimeout(function() { // and now start a new operation
    console.clear()
    var video_height = 500;
    var totalVideos = 49;
//a proper way to calculate which video to play 
            current =Math.floor(( $this.scrollY / (totalVideos * video_height )) * totalVideos ); 
            console.log(current)
                  
                // now you should just validate if the video is in the center of the screan and theis should work
                video_player = content.children[current];
                if (video_player){
                // here you should clear all previews player
               // video_player.removeAttribute("src");
               // video_player.controls = false;
               // video_player.load();
               // video_player = content.children[current];
                video_player.src = "https://dash.akamaized.net/akamai/bbb/bbb_640x360_60fps_1200k.mp4";
                video_player.controls = true;
                video_player.load();
}
    },100);

    this.oldScroll = this.scrollY
}
window.addEventListener("scroll", scroll_function);

video_player = content.children[current];
video_player.src = "https://dash.akamaized.net/akamai/bbb/bbb_640x360_60fps_1200k.mp4";
video_player.controls = true;
video_player.load();

body {
    margin: 0;
}
#content {
    height: 100%;
    width: 75%;
    margin-left: 12.5%;
}
video {
    width: 500px;
    height: 500px;
}

<html>
<head>
    <title></title>
</head>
<body>
    <div id="content"></div>
</body>
</html>

Answer 2

我想我可能已经创建了一个完美的版本，有人可以检查可能出现的任何问题。

window.onbeforeunload = function () {
    this.scrollTo(0, 0);
}

var content = document.getElementById("content"),
    video_player = undefined,
    current = 0,
    timeout = undefined;

for (var x=0;x<50;x++) {
    var video = document.createElement("video");
    video.style.backgroundColor = "orange";
    content.appendChild(video);
}

window.addEventListener("scroll", function () {
    var $this = this;
    window.clearTimeout(timeout);
    timeout = setTimeout(function() {
        var content_margin_top = $this.innerHeight * 0.11;
        var middle_line = $this.scrollY + ($this.innerHeight/2);
        for (var y=0; y < content.querySelectorAll("video").length; y++) {
            var player = content.children[y];
            if ((player.offsetTop + content_margin_top) < middle_line && (player.offsetTop + player.clientHeight + content_margin_top) > middle_line) {
                if (video_player != player) {
                    video_player.poster = "";
                    video_player.load();
                    video_player = player;
                    video_player.poster = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg";
                    video_player.load();
                }
                break;
            }
        }
    }, 100);
});

video_player = content.children[current];
video_player.poster = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg";
video_player.load();

body {
    margin: 0;
}
#nav {
    width: 100%;
    height: 10%;
    position: absolute;
    top: 0;
    background-color: rgb(108, 171, 247);
}
#content {
    height: 100%;
    width: 98%;
    position: absolute;
    top: 11%;
    left: 1%;
}
video {
    width: 100%;
    height: 50%;
    border: 1px solid black;
}

<html>
<head>
    <title></title>
</head>
<body>
    <div id="nav"></div>
    <div id="content"></div>
</body>
</html>