作为窗口焦点滚动时自动播放视频

Question

视频博客，视频为800x600像素（大部分浏览器屏幕）。 我使用的HTML标签属性的“循环”和“自动播放”

拥有超过10个视频，到目前为止，浏览器播放所有他们的摊位！

我需要一段代码来一次播放一个视频，因为用户滚动到焦点视频并暂停视频，只要没有滚动焦点。

Answer 1

如果视频均匀分布在600px高处，并假设视频的边距至少为50px，这意味着每个视频的功能高度均为700px。所以你想播放最接近屏幕顶部的视频。

const qVideos = document.querySelectorAll('video');

^这里假设你正在使用的视频元素播放视频，并收集他们。

const calcVideoNumber = scrollPositionY => Math.floor(scrollPositionY/700);

^此功能需要在您的滚动位置，并返回700像素高的部分，您是下来的页面数量（这应该是你的视频部分的高度）。

const stopPlaying = videos => Array.from(videos).forEach(video => video.pause());

^停止播放所有视频通过

window.onscroll = event => { stopPlaying(qVideos); qVideos[calcVideoNumber(event.scrollY)].play() }