本文详解如何在基于 PHP 的静态视频画廊中，精准地在每个 <video> 标签下方显示对应文件的原始名称（不含路径与扩展名），并修复原代码中因嵌套循环和重复遍历导致的布局错乱问题。
本文详解如何在基于 php 的静态视频画廊中，精准地在每个 `
在构建 PHP 视频画廊时，仅渲染 <video> 元素是不够的——用户需要直观识别每个视频的内容，而文件名是最直接的标识方式。原代码的核心问题在于：*错误地在视频循环内部嵌套了第二次全目录扫描（`glob('gallery/')`）**，导致每插入一个视频，就重复输出全部文件名，最终页面混乱、语义错位。
正确的做法是：在遍历 $videos 数组时，对每个 $vid 路径一次性提取干净的文件名（去除路径与扩展名），并紧邻 <video> 标签生成对应的标题元素。 以下是优化后的完整 PHP 渲染逻辑（替换 Gallery.php 中 <div id="vid-gallery"> 内的 PHP 部分）：
<?php
// (A) 定义支持的视频格式（推荐使用 GLOB_BRACE 支持多扩展名）
$dir = __DIR__ . DIRECTORY_SEPARATOR . 'gallery' . DIRECTORY_SEPARATOR;
$videos = glob($dir . '*.{mp4,webm,ogg}', GLOB_BRACE);
// (B) 输出视频及对应文件名（无扩展名）
if (!empty($videos)) {
foreach ($videos as $vid) {
$filename = basename($vid); // 获取带扩展名的文件名，如 "sunset.mp4"
$nameWithoutExt = pathinfo($filename, PATHINFO_FILENAME); // 推荐：安全提取主文件名
// 输出视频标签 + 文件名标题（使用语义化 <figcaption> 或 <p> 更佳）
printf(
'<figure class="video-item">
<video src="gallery/%s" controls preload="metadata"></video>
<figcaption>%s</figcaption>
</figure>',
rawurlencode($filename),
htmlspecialchars($nameWithoutExt, ENT_QUOTES, 'UTF-8')
);
}
} else {
echo '<p>暂无视频文件，请检查 gallery 目录。</p>';
}
?>✅ 关键改进说明：
- 移除冗余循环：彻底删除原代码中 foreach($fileList as $filename) 这一嵌套结构，避免 N×N 次重复输出；
- 使用 pathinfo(..., PATHINFO_FILENAME)：比 basename($vid, $exten) 更健壮——无需预设扩展名，自动适配 .mp4/.webm/.ogg 等任意后缀；
- 语义化 HTML 结构：用 <figure> 包裹 <video> 与 <figcaption>，符合 HTML5 规范，提升可访问性与 SEO；
- 安全转义输出：htmlspecialchars() 防止文件名含特殊字符（如 <, &）引发 XSS 或 DOM 解析错误；
- 添加 controls 与 preload="metadata"：提升用户体验，确保视频可操作且快速加载元信息。
? CSS 补充建议（增强排版）：
为使标题清晰居中于视频下方，可在 2-theme.css 中追加：
.video-item {
display: inline-block;
text-align: center;
margin: 0 10px;
}
.video-item video {
width: 100%;
max-width: 400px;
height: auto;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.video-item figcaption {
margin-top: 8px;
font-weight: 600;
color: #333;
font-size: 0.95rem;
word-break: break-all;
}⚠️ 注意事项：
立即学习“PHP免费学习笔记（深入）”；
- 确保 gallery/ 目录存在且 Web 服务器有读取权限；
- 文件名若含中文或空格，rawurlencode() 已保障 URL 安全，但建议统一使用英文+下划线命名以减少兼容性风险；
- 若需支持更多格式（如 .mov），只需在 glob() 的模式中追加 ,{mov} 即可；
- 生产环境请禁用 display_errors，避免暴露路径信息。
通过以上重构，每个视频将严格对应其简洁、安全、语义化的文件名标题，画廊结构清晰、维护性强，真正实现「所见即所得」的媒体展示体验。
