使用 JavaScript 从数据库播放视频

Question

我正在制作一个视频共享网站，允许用户登录和上传视频。一切正常！问题是用js播放视频不行；相反，只播放第一个视频。这是我检索视频的代码 (php/html)    <?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(); } 这个东西只播放我的数据库表中的第一个视频。欢迎任何答案，包括可以使工作更轻松的 js 库。

Answer 1

您可以在不需要 ID 属性的情况下完成特定视频的定位，而是使用querySelectorAll和querySelector（您也可以使用父/子/兄弟遍历技术）

如果您创建一个nodelistusing ，querySelectorAll您可以在外部分配事件侦听器而不是使用<a onclick='play()'>etc ，这是首选方法。该click事件已注册为您可以发出另一个查询以查找使用this的子元素thisquerySelector

<?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>