作爲窗口焦點滾動時自動播放視頻

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() }