Css 如何在焦点到达视频时自动播放视频/

在我的网页，我有5个视频在一个单一的页面。当我看到那个部分时，我想要视频播放

例如

页面加载视频后，如果我将页面滚动到第二节，则自动播放第二个视频需要播放

我在代码中使用了视频标签

<video id="jp_video_4" autoplay="autoplay" loop="loop" style="width: 100%; height: auto;" src="Workspace/assets/videos/Play and Learn SLOW.webm"></video>

---

任何人都知道如何解决此问题，您必须获得视频元素相对于页面的所有位置，并在每个滚动事件中将其与

窗口进行比较

这里是一个带注释的片段，我使用该方法获取视频元素的位置


//我们的视频元素列表
var videos=document.queryselectoral（“视频”）；
//存储每个元素的顶部和底部的数组
var videoPos=[]；
//加载视频时检查元素位置的计数器
var=0；
//这里我们得到每个元素的位置并将其存储在一个数组中
函数checkPos（）{
//循环浏览我们所有的视频
对于（var i=0；i=min&&vidObj.top
视频{
边缘底部：800px；
显示：块；
}
滚动查看并自动播放视频