CODEWITHSUNDEEP
javascript
aman
aman

Reputation: 393

How to play video when it appears in middle of the window?

I'm trying to implement Instagram, Facebook, 9GAG and etc's system of videos autoplaying when any specific video appears in the middle of the window/screen as the window/screen is being scrolled. So I want to create a system where there are numerous video on the page and when any specific video appears in the middle of the window/screen it should set src and start playing the video and remove src of the previous video playing. I have created my own logic, but it only works when the window is being scrolled slowly. It loses record of current video playing if the window is scrolled fast. So my logic is not good and efficient enough. Please help me build a better logic to playing video when they appear in the middle of the window.

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;
}
<html>
<head>
    <title></title>
</head>
<body>
    <div id="content"></div>
</body>
</html>

Upvotes: 1

Views: 966

Answers (2)

aman
aman

Reputation: 393

I think I may have created a perfect version, can someone check for any problems which can occur.

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>

Upvotes: 1

Alen.Toma
Alen.Toma

Reputation: 4870

now you should just validate if the video is in the center of the screan and this should work

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>

Upvotes: 1

Related Questions