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

Question

视频博客，其中视频为800x600像素（占据大部分浏览器屏幕）。 我正在使用带有'loop'和'autoplay'

属性的html标签

到目前为止，有超过10个视频，浏览器会播放所有这些视频！

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

Answer 1

如果视频均匀间隔为600px高，并假设视频上的边距至少为50px，则表示每个视频的功能高度为700px。因此，您希望播放最接近屏幕顶部的视频。

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

^这假设您正在使用视频元素播放视频并正在收集它们。

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

^此功能会接收您的滚动位置并返回您在页面下方的700px（这应该是您的视频区段高度）的高位部分。

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

^停止播放所有传递的视频

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