javascript - 当窗口聚焦时自动滚动播放视频

Question

视频博客，其中视频为 800x600 像素(占据浏览器屏幕的大部分)。 我正在使用带有属性“loop”和“autoplay”的 html 标签

到目前为止，浏览器播放了超过 10 个视频，所有这些视频都卡住了!

我需要一段代码来在用户滚动到焦点视频时一次播放一个视频，并在离开滚动焦点时立即暂停视频。

Answer 1

如果视频均匀分布在 600 像素高，并且假设视频的边距至少为 50 像素，则意味着每个视频的功能高度为 700 像素。因此您想要播放最靠近屏幕顶部的视频。

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 = 事件 => { 停止播放(qVideos)； qVideos[calcVideoNumber(event.scrollY)].play() }