如何在可见性上播放视频

如何解决如何在可见性上播放视频

我有一些视频存储在 MysqL 数据库中，我已将它们提取到我的网页，我正在尝试在可见性上播放这些视频，我已经尝试了很长时间来播放这些视频，但只有其中一个继续播放，这是我的代码

 <div style="width:100%; background-color:black; margin-top:10px;">
  
  <?PHP
  
$m31= MysqLi_query($con,"SELECT * FROM `video`   " );
 while($row = MysqLi_fetch_assoc($m31)){        
    $vid = $row['vid'];
    $id = $row['id'];

?>

 <video id="myvideo"  style="width:100%; height:400px;"  controls   />
 <source  style="width:100%; height:400px;" src="video/<?PHP echo $vid ; ?>"  />
 </video>
 
     <?PHP } ?>
</div>

<script>
let options = {
    root:  null,rootmargin:'0px',threshold:1.0
};
    let myback = (entries,observer)=>{
    entries.forEach(entry => {
        if(entry.target.id == 'myvideo'){
            if(entry.isIntersecting){
            entry.target.play();    
            }else{
            entry.target.pause();   
            }
        }
    });
}

let observer = new IntersectionObserver(myback,options);
observer.observe(document.querySelector('#myvideo'));

我尝试过这样的事情，但我得到了 undifined id

 <video id="myvideo<?PHP echo $id ?>"  style="width:100%; height:400px;"  controls   />
 <source  style="width:100%; height:400px;" src="video/<?PHP echo $vid ; ?>"  />
 </video>
 
     <?PHP } ?>
</div>

<script>
let options = {
    root:  null,observer)=>{
    entries.forEach(entry => {
        if(entry.target.id == 'myvideo'+id){
            if(entry.isIntersecting){
            entry.target.play();    
            }else{
            entry.target.pause();   
            }
        }
    });
}

let observer = new IntersectionObserver(myback,options);
observer.observe(document.querySelector('#myvideo'+id));
</script>