本教程详解如何在基于 PHP 的静态视频画廊中，为每个 <video> 标签自动添加下方居中的文件名标题（去除路径与扩展名），解决因嵌套循环和路径处理不当导致的重复渲染与错位问题。
本教程详解如何在基于 php 的静态视频画廊中，为每个 `
在构建 PHP 驱动的简易视频画廊时，一个常见需求是：不仅播放视频，还要在每个视频下方清晰显示其原始文件名（如 sunset.mp4 → 显示为 sunset）。你当前代码的核心问题在于——错误地在内层 foreach 中重复遍历整个目录，导致每个视频下方都堆叠输出全部文件名，而非仅当前视频的名称。
以下是经过优化、健壮且可维护的完整实现方案：
✅ 正确做法：单次遍历 + 精准提取文件名
将原 Gallery.php 中的 PHP 块替换为以下代码（已移除冗余逻辑、支持多格式、增强可读性）：
<?php
$galleryDir = __DIR__ . DIRECTORY_SEPARATOR . 'gallery' . DIRECTORY_SEPARATOR;
// 支持 WebM、MP4、OGG 三种主流视频格式
$videos = glob($galleryDir . '*.{webm,mp4,ogg}', GLOB_BRACE);
if (!empty($videos)) {
echo '<div class="video-item">';
foreach ($videos as $videoPath) {
$filename = basename($videoPath); // 如: "beach.mp4"
$nameWithoutExt = pathinfo($filename, PATHINFO_FILENAME); // 如: "beach"
// 输出视频标签 + 对应标题（语义化使用 <figure> + <figcaption> 更佳）
printf(
'<figure>
<video src="gallery/%s" poster="data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'640\' height=\'360\' viewBox=\'0 0 640 360\'%3E%3Crect width=\'640\' height=\'360\' fill=\'%23eee\'/%3E%3Ctext x=\'50%%\' y=\'50%%\' font-size=\'16\' text-anchor=\'middle\' dominant-baseline=\'middle\' fill=\'%23999\'%3E▶ Video%3C/text%3E%3C/svg%3E" controls></video>
<figcaption>%s</figcaption>
</figure>',
rawurlencode($filename),
htmlspecialchars($nameWithoutExt)
);
}
echo '</div>';
} else {
echo '<p>⚠️ 画廊目录中未找到支持的视频文件（.webm/.mp4/.ogg）。</p>';
}
?>? 关键改进说明
- pathinfo($filename, PATHINFO_FILENAME)：比手动 basename($vid, '.mp4') 更可靠，能自动适配任意扩展名（包括 .my-video.MP4 或带点号的文件名），避免硬编码扩展名带来的兼容性风险。
- htmlspecialchars() 包裹文件名：防止 XSS 漏洞（例如文件名为 <script>alert(1)</script>.mp4）。
- 语义化 HTML 结构 <figure><video><figcaption>：符合 W3C 标准，提升可访问性（屏幕阅读器可识别标题归属），也便于后续 CSS 精准控制样式。
- 移除嵌套 glob() 循环：原代码中 $fileList = glob('gallery/*') 在每次视频迭代中重复执行，既低效又导致内容错乱；现改为单次获取、单次处理。
- 添加 poster 属性：提供简洁 SVG 占位图，改善无缩略图时的视觉体验（可选，但推荐）。
? CSS 补充建议（增强排版）
在你的 2-theme.css 中追加以下样式，使标题居中、字体适中、间距合理：
立即学习“PHP免费学习笔记（深入）”；
.video-item {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
figure {
margin: 0;
}
video {
width: 100%;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
figcaption {
margin-top: 0.5rem;
font-weight: 600;
font-size: 0.95rem;
color: #333;
text-align: center;
word-break: break-all;
}⚠️ 注意事项与最佳实践
- 文件权限与安全性：确保 gallery/ 目录不可执行 PHP（通过 Web 服务器配置禁止 .php 文件被解析），且不包含敏感文件。
- 中文/特殊字符支持：rawurlencode() 已保障 URL 安全；若文件名含中文，需确认服务器环境支持 UTF-8（PHP 文件保存为 UTF-8 无 BOM，HTML 声明 <meta charset="UTF-8">）。
- 性能提示：对于上千个视频，glob() 可能变慢，此时应考虑缓存文件列表或改用数据库索引。
- 扩展性建议：未来如需添加描述、上传时间、分类等元数据，建议迁移到 JSON 配置文件或轻量数据库（如 SQLite），而非依赖文件系统命名。
通过以上重构，你将获得一个结构清晰、安全可靠、易于维护的视频画廊，并精准实现「每个视频下方显示其干净文件名」的核心目标。
