本文介绍在 php 后端批量渲染视频列表时，如何精准识别并仅为返回 404 的视频元素动态注入 `poster` 属性，避免误配或全局生效，确保可用视频正常播放、失效视频直观提示。
在构建多视频展示页面（如课程视频库、媒体画廊）时，常需从数据库拉取视频元数据并逐个渲染 <video> 标签。但若部分视频文件未成功上传或路径失效，前端直接加载将触发 404 错误——此时用户仅看到空白播放器或控制栏异常，缺乏明确反馈。理想方案是：仅对确认不可用的视频，自动添加 poster 属性指向占位图；而正常视频则完全不设置该属性，保障原生播放体验。
关键在于服务端完成「资源可达性预检」与「条件化属性注入」。你已通过 @file_get_contents($url) 尝试检测，但需注意两点优化：
- @file_get_contents() 并非可靠 404 检测方式：它可能因超时、SSL 配置、服务器拒绝等非 404 原因失败，且消耗额外 HTTP 请求；更健壮的做法是检查文件系统路径是否存在（若视频位于本地），或使用 get_headers() 获取 HTTP 状态码；
- poster 属性必须严格按需输出：不能默认赋值空字符串（如 poster=""），否则浏览器仍会尝试加载空海报，可能引发意外行为；应完全省略该属性。
以下是推荐的改进实现（基于你的原有逻辑）：
<?php
$storage = new ObjectStorage;
$db->query("SELECT videoId, videoVsId, videoFile, videoUploadTime FROM videos
WHERE vidOjId='$jbId'
AND videoArchived = '0000-00-00 00:00:00'
AND videoFile LIKE '%/videos/uploaded_videos/items/%'");
$brokenPoster = "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png";
while ($db->next_record()) {
list($videoId, $videoVsId, $videoFile, $vidUploaded) = $db->Record;
$vidname = after("_video_", $videoFile);
$url = "https://website.website.com" . $videoFile;
// ✅ 更可靠的 404 检测：使用 get_headers() 获取状态码
$headers = @get_headers($url);
$isBroken = !is_array($headers) || strpos($headers[0], '404') !== false;
// ✅ 构建视频上传时间描述
$vidUploaded = $vidUploaded
? "Uploaded: " . date("H:i d/m/Y", strtotime($vidUploaded))
: "Last edited: " . date("H:i d/m/Y", filemtime("../uploaded_videos/" . $videoFile));
?>
<div class="videoDiv_<?= htmlspecialchars($videoId) ?>">
<div class="videosDiv">
<video
width="320"
height="240"
controls
class="img_<?= htmlspecialchars($videoId) ?>"
src="<?= htmlspecialchars($videoFile) ?>?nocache=<?= rand() ?>"
type="video/mp4"
<?php if ($isBroken): ?>
poster="<?= htmlspecialchars($brokenPoster) ?>"
<?php endif; ?>
>
Your browser does not support the video tag.
</video>
</div>
</div>
<?php } ?>重要注意事项：
- 安全防护：所有输出到 HTML 的变量（如 $videoId, $videoFile）务必经 htmlspecialchars() 转义，防止 XSS 攻击；
- 性能考量：get_headers() 会产生网络请求，若视频数量庞大（如 >50 条），建议改用本地文件存在性检查（file_exists("../uploaded_videos/$videoFile")），或引入缓存机制；
- ID 唯一性：原代码中 id="allVideos" 被重复使用，违反 HTML 规范。应改为动态 ID，如 id="video-<?= $videoId ?>"；
- 备用方案：若后端检测不可行，可结合前端 JavaScript 监听 onerror 事件动态设置 poster，但需注意跨域限制。
通过以上结构化处理，每个 <video> 标签将仅在确认失效时才携带 poster 属性，既清晰区分状态，又保持代码语义正确与用户体验一致。
