JavaScript未作用于MySQL视频ID，点击播放仅最后一个视频生效

你这代码的问题很明确：

1. 全局变量和函数被反复覆盖：循环里每次都生成一个<script>标签，定义全局的id变量和playPause函数。JavaScript中全局作用域的内容，后面的会直接覆盖前面的，所以最终只有最后一个视频的id和函数生效，点击其他按钮实际调用的都是最后那个函数，操作的是最后一个视频。
2. 播放按钮与视频未正确绑定：代码里仅定义了播放/暂停函数，但缺少对应的播放按钮元素，就算后续手动添加了按钮，也会因为函数被覆盖，只能触发最后一个视频的播放操作。

第一步：调整HTML结构，添加播放按钮 #

给每个视频容器内添加播放按钮，通过自定义属性data-video-id关联对应视频的ID，同时给视频ID加前缀避免和其他DOM元素冲突：

<?php 
include "db_conn.php";
$sql = "SELECT * FROM videos ORDER BY id DESC";
$res = mysqli_query($conn, $sql);

if (mysqli_num_rows($res) > 0) {
    while ($video = mysqli_fetch_assoc($res)) { 
?>
<div class="video">
    <!-- 给视频ID加前缀video-，避免与其他元素ID冲突 -->
    <video class="video__player" id="video-<?=$video['id']?>" src="uploads/<?=$video['video_url']?>"></video>
    <!-- 添加播放按钮，通过data属性关联对应视频ID -->
    <button class="play-btn" data-video-id="video-<?=$video['id']?>">播放/暂停</button>
</div>
<?php 
    }
}else {
    echo "<h1>暂无视频内容</h1>";
}
?>

第二步：统一编写JavaScript逻辑（移出循环） #

将JavaScript代码放在页面底部（</body>标签前即可），一次性给所有播放按钮绑定事件，避免重复生成脚本导致的变量覆盖：

// 获取所有播放按钮
const playButtons = document.querySelectorAll('.play-btn');

// 给每个按钮绑定点击事件
playButtons.forEach(btn => {
    btn.onclick = function() {
        // 从按钮的自定义属性中获取对应视频的ID
        const videoId = this.getAttribute('data-video-id');
        const video = document.getElementById(videoId);
        
        // 切换视频的播放/暂停状态
        if (video.paused) {
            video.play();
        } else {
            video.pause();
        }
    }
});

额外优化（视频数量多时更高效） #

如果视频数量较多，用事件委托替代逐个绑定事件，能节省性能开销：

// 先给所有.video容器套一个父容器，比如<div class="video-list">
document.querySelector('.video-list').addEventListener('click', function(e) {
    // 判断点击的元素是播放按钮
    if (e.target.classList.contains('play-btn')) {
        const videoId = e.target.getAttribute('data-video-id');
        const video = document.getElementById(videoId);
        // 简化写法：三元表达式切换播放状态
        video.paused ? video.play() : video.pause();
    }
});

内容的提问来源于stack exchange，提问作者tofi tofi