本文详解如何在基于 PHP 的静态视频画廊中，为每个 <video> 标签自动添加对应文件名（去除路径与扩展名）作为标题，并嵌入在视频下方，解决因重复遍历、结构错位导致的布局混乱问题。
本文详解如何在基于 php 的静态视频画廊中，为每个 `
在构建 PHP 视频画廊时，仅渲染 <video> 标签是不够的——用户需要直观识别每个视频的内容，因此在视频下方显示简洁、可读的文件名（如 sunset.mp4 → sunset）是基础且关键的体验优化。原始代码存在两个核心问题：一是嵌套了冗余的 foreach 循环（在单个视频输出后又全局遍历所有文件），导致标题重复堆叠、错位；二是未对文件名做标准化处理（未剥离路径和扩展名），直接输出 $filename 会显示完整路径（如 gallery/beach.mp4），破坏语义与样式。
正确的做法是：在遍历视频文件的同一循环内，为每个视频生成对应的 <video> 标签 + 紧邻其下的标题标签（如 <p class="video-title">），并使用 basename($vid, $extension) 精确提取无扩展名的文件名。
以下是重构后的 Gallery.php 中 PHP 核心逻辑（已整合进 HTML 结构）：
<div id="vid-gallery">
<?php
$dir = __DIR__ . DIRECTORY_SEPARATOR . 'gallery' . DIRECTORY_SEPARATOR;
// 支持多种格式，GLOB_BRACE 兼容性好
$videos = glob("$dir*.{mp4,webm,ogg}", GLOB_BRACE);
if (!empty($videos)) {
foreach ($videos as $vid) {
$filename = basename($vid); // 获取带扩展名的文件名，如 "tour.mp4"
$nameWithoutExt = pathinfo($filename, PATHINFO_FILENAME); // 推荐：更健壮地移除扩展名
// 输出视频 + 下方标题（使用语义化 <figure> 更佳）
echo '<figure class="video-item">';
printf('<video src="gallery/%s" controls preload="metadata"></video>', rawurlencode($filename));
echo '<figcaption class="video-title">' . htmlspecialchars($nameWithoutExt) . '</figcaption>';
echo '</figure>';
}
} else {
echo '<p class="no-videos">暂无视频文件，请检查 gallery 目录。</p>';
}
?>
</div>? 关键改进说明：
立即学习“PHP免费学习笔记（深入）”；
- ✅ 单循环、单职责：每个 $vid 对应一组 <video> + <figcaption>，避免嵌套循环引发的 DOM 错乱；
- ✅ 安全的文件名处理：使用 pathinfo($filename, PATHINFO_FILENAME) 替代硬编码扩展名（如 .mp4），可正确处理任意扩展名（clip.webm → clip），且不依赖 $exten 变量；
- ✅ XSS 防护：用 htmlspecialchars() 转义文件名，防止恶意文件名注入 HTML；
- ✅ 语义化结构：采用 <figure> + <figcaption> 组合，符合 HTML5 规范，利于 SEO 和可访问性；
- ✅ 增强可用性：为 <video> 添加 controls 和 preload="metadata"，提升首帧加载体验。
? 配套 CSS 建议（增强排版）：
在 2-theme.css 中追加以下样式，确保标题紧贴视频底部、字体适中、居中对齐：
.video-item {
display: inline-block;
text-align: center;
width: 100%;
}
.video-title {
margin-top: 8px;
font-size: 0.9em;
font-weight: 500;
color: #333;
word-break: break-word;
}
/* 响应式微调 */
@media (max-width: 600px) {
.video-title { font-size: 0.85em; }
}⚠️ 注意事项：
- 确保 gallery/ 目录权限允许 Web 服务器读取（如 Linux 下 chmod 755 gallery）；
- 文件名避免特殊字符（空格、中文、符号），若必须支持，请额外使用 urldecode() 或 UTF-8 安全转义；
- glob() 不递归子目录；如需多级支持，改用 RecursiveIteratorIterator + RegexIterator；
- 生产环境建议增加 MIME 类型校验（finfo_file()），防止伪造扩展名的非法文件被误播。
通过以上结构化实现，你将获得一个整洁、安全、可维护的视频画廊——每个视频下方精准显示其本名，无需手动维护标题，真正实现「所存即所见」。
