动态页面视频路径加载异常，点击查看按钮始终播放同一视频如何解决

核心错误原因 #

• 你的watch函数定义在PHP循环结束之后，此时$row变量存储的是最后一条视频记录的值，函数里硬编码的<?php echo $row['video_id'] ?>固定为最后一个视频的ID
• 你在点击按钮时已经传入了当前视频的ID，但watch函数没有接收这个参数，始终使用固定的最后一个视频ID操作，所以无论点哪个按钮都播放同一个视频

修复方案 #

直接替换你的JavaScript代码段为以下内容即可解决播放错误：

<script type="text/javascript">
// 接收点击按钮传入的视频ID参数
function watch(videoId){
  // 先暂停并隐藏所有已经打开的视频，避免同时播放多个
  document.querySelectorAll('.player_video video').forEach(video => {
    video.pause();
    video.parentElement.style.visibility = 'hidden';
  });
  // 操作当前点击对应的视频
  const targetVideo = document.getElementById(videoId);
  targetVideo.parentElement.style.visibility = 'visible';
  targetVideo.play();
}
</script>

其他优化建议 #

• 移除循环内的<title>标签：<title>只能放在页面的<head>区域，放在卡片中不符合HTML规范，卡片标题用<h3>或者<p>标签即可
• 输出前端内容时增加转义：所有从数据库取出输出到页面的内容，都用htmlspecialchars()包裹，比如<?php echo htmlspecialchars($row['Title'])?>，可以避免XSS注入攻击，也能防止特殊字符破坏页面结构
• 优化数据库查询：不要用SELECT *，显式写出你需要用到的字段SELECT video_id,Title,Thumbnail,Description,Location FROM video，查询性能更高也更安全
• 优化播放器加载逻辑：如果视频数量多，一次性渲染所有<video>标签会拖慢页面加载速度，可以单独在页面放一个全局共用的播放器，点击View按钮时动态替换播放器的src属性，减少无用DOM节点
• 可以给视频增加加载失败、播放出错的提示逻辑，提升用户体验

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