代码之家 › 专栏 › 技术社区 › aman

当视频出现在窗口中间时如何播放?

javascript

aman · 技术社区 · 6 年前

我正在努力实现 Instagram , Facebook , 9GAG 以及ETC的视频自动播放系统,当窗口/屏幕滚动时,任何特定视频出现在窗口/屏幕的中间。所以我想创建一个系统,其中有许多 video 在页面上以及任何特定的 视频 出现在窗口/屏幕的中间,它应该设置 src 然后开始播放 视频 去除 SRC 以前的 视频 玩。我已经创建了自己的逻辑,但它只在滚动窗口时才起作用。 缓慢地 .如果快速滚动窗口,它将丢失当前视频播放的记录。所以我的逻辑不够好和有效。请帮我建立一个更好的游戏逻辑 视频 当它们出现在窗口中间时。

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>

2 回复 | 直到 6 年前

Alen.Toma 6 年前

现在你只需验证视频是否在屏幕中央,这就可以了。

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>

aman 6 年前

我想我可能创造了一个完美的版本,有人能检查任何可能发生的问题吗?

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>