使用JavaScript从数据库播放视频

我正在制作一个视频分享网站，允许用户登录和上传视频。一切都很好！问题是，使用js播放视频不起作用；相反，只播放第一个视频。下面是我检索视频的代码（php/html）

---

这个东西只播放我的db表中的第一个视频。任何答案都是受欢迎的，包括使工作更容易的js库。

您可以在不需要ID属性的情况下使用

querySelectorAll

和

querySelector

（您也可以使用父/子/同级遍历技术）完成特定视频的目标定位

如果使用

querySelectorAll

创建

nodelist

，则可以从外部而不是使用

趋势
Array.from（document.querySelectorAll（'.gallery>a'））.forEach（a=>{
a、 addEventListener（'click'，函数（e）{
var video=this.querySelector（'video'）；
如果（video.paused）video.play（）；
else video.pause（）；
//查找其他未激活的视频并暂停它们
Array.from（document.querySelectorAll（'.gallery>a>video'））.forEach（el=>{
如果（el！=视频）el.pause（）
})
})
})

如果DOM中的每个元素都必须有一个ID，那么它必须有一个唯一的ID。您不能在循环中使用相同的ID

video

，希望您的javascript知道ID所指的是哪一个，这样做非常好，请欣赏！有可能在点击其他视频时暂停视频吗？做了一个小修改，应该（我希望）暂停其他视频-虽然没有测试

    <?php
    include("conn.php");
    $sql = mysqli_query($con, "SELECT * FROM uploads ORDER BY file_id DESC");
    while ($row = mysqli_fetch_array($sql)) {
      $path = $row['path'];
      $caption = $row['caption'];

  ?>
<div class="responsive">
  <div class="gallery">
    <a href="#" onclick="play()">
      <video  width="600" height="400" id="video">
        <source src="store/vids/<?php echo $path;?>" type="video/mp4">
      </video>
    </a>
    <div class="desc"><br><?php echo $caption?> <span class="badge badge-pill badge-primary">Trending</span></div>
  </div>
</div>
<?php  } ?>

var video = document.getElementById("video"); 
function play() { 
  if (video.paused) 
    video.play(); 
  else 
    video.pause(); 
} 

<?php
    include("conn.php");
    $sql = mysqli_query($con, "SELECT * FROM uploads ORDER BY file_id DESC");
    while ($row = mysqli_fetch_array($sql)) {
        $path = $row['path'];
        $caption = $row['caption'];

?>

<div class="responsive">
  <div class="gallery">
    <a href="#">
      <video  width="600" height="400">
        <source src="store/vids/<?php echo $path;?>" type="video/mp4">
      </video>
    </a>
    <div class="desc"><br><?php echo $caption?> <span class="badge badge-pill badge-primary">Trending</span></div>
  </div>
</div>

<?php 
    }//close while loop
?>


<script>
    Array.from( document.querySelectorAll('.gallery > a') ).forEach( a=>{
        a.addEventListener('click',function(e){
            var video=this.querySelector('video');

            if( video.paused )video.play();
            else video.pause();

            // find other videos that are NOT the one just activated and pause them
            Array.from( document.querySelectorAll('.gallery > a > video') ).forEach( el=>{
                if( el!=video )el.pause()
            })
        })
    })
</script>