路口观察员仅适用于第一个视频

Question

如果视频不在视野中，我需要暂停它
以下代码仅适用于列表中的第一个视频
如何让它适用于所有 .bvideo ?

<video class='bvideo' src='a.mp4' poster='a.jpg' preload='none' controls></video>
<video class='bvideo' src='b.mp4' poster='b.jpg' preload='none' controls></video>
<video class='bvideo' src='c.mp4' poster='c.jpg' preload='none' controls></video>

let io = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if(!entry.isIntersecting){entry.target.pause();}
  });
});

$(document).ready(function(){
    io.observe(document.querySelector('.bvideo'));
});

Answer 1

使用 querySelectorAll() 方法。

$(document).ready(function() {
    let bvideos = document.querySelectorAll('.bvideo');
    bvideos.forEach(bvideo => io.observe(bvideo));
});