多视频播放次数统计问题：仅首个视频可写入PHPMyAdmin数据库

当前要实现页面中每个视频的播放次数统计，用户点击播放时累计对应视频的总播放量并存入PHPMyAdmin数据库，但仅第一个视频的播放次数能成功写入，其余视频无法触发统计逻辑。

问题根源 #

• JS中使用document.querySelector("video")仅能获取页面中第一个<video>元素，因此只有第一个视频绑定了播放事件监听
• 全局变量a被所有视频共用，会导致计数逻辑混乱，且前端传递计数存在被篡改的风险
• PHP中依赖前端传递的计数进行累加，未考虑并发场景下的计数准确性

修改后的JavaScript代码 #

<script type="text/javascript">
// 获取页面中所有视频元素
const videos = document.querySelectorAll("video");

// 循环为每个视频绑定播放事件
videos.forEach(video => {
  video.onplay = (event) => {
    // 获取当前触发播放的视频ID
    const videoId = video.id;
    console.log("播放的视频ID：", videoId);

    // 发送请求通知后端该视频被播放一次
    $.ajax({
      url: 'new-count-UPDATE.php',
      method: 'POST',
      data: {
        nameV: videoId
        // 不再传递前端计数，由后端处理累加
      },
      success: function(response) {
        console.log("统计更新响应：", response);
      }
    });
  }
});
</script>

修改后的PHP代码 #

<?php
include("../db_conn.php");

// 验证请求参数是否存在
if (!isset($_POST['nameV'])) {
    echo "缺少必要参数";
    exit;
}

$videoId = $_POST['nameV'];

// 更高效且安全的更新方式：直接在数据库层面完成累加，避免并发问题
$sql = "UPDATE `video-count` SET `videoCount` = `videoCount` + 1 WHERE `videoName` = ?";
$qc = $pdo_conn->prepare($sql);
$success = $qc->execute([$videoId]);

if ($success) {
    // 可选：返回更新后的计数
    $qry = "SELECT `videoCount` FROM `video-count` WHERE `videoName` = ?";
    $prep = $pdo_conn->prepare($qry);
    $prep->execute([$videoId]);
    $result = $prep->fetch(PDO::FETCH_ASSOC);
    echo "播放次数已更新，当前次数：" . $result['videoCount'];
} else {
    echo "更新失败";
}
?>

关键优化点 #

• 精准识别视频：使用document.querySelectorAll("video")获取所有视频，通过循环为每个视频独立绑定播放事件，确保每个视频的播放操作都能被捕获
• 后端处理计数：不再依赖前端传递的计数，直接在数据库中执行videoCount = videoCount + 1，既避免前端篡改数据，也解决了多用户同时播放时的并发计数错误
• 参数验证：PHP中增加参数存在性检查，提升代码健壮性

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