在窗口聚焦时在滚动上自动播放视频

Question

一个视频博客，其中的视频是800x600像素(占浏览器屏幕的大部分)。我正在使用带有属性'loop‘和'autoplay’的html标签

到目前为止，浏览器已经播放了10多个视频，所有这些视频都播放了一个档次！

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

Answer 1

如果视频以600px的高度均匀分布，让我们假设视频的边距至少为50px，这意味着每个视频的功能高度为700px。因此，您希望播放最靠近屏幕顶部的视频。

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

^这假设您正在使用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() }