无需使用video poster，如何获取视频截图填充缩略图？

嘿，我来给你几个实用的方案解决这个问题——不用手动上传poster，自动获取视频截图填充空白区域，让你的视频播放器看起来更完整：

方法1：前端JS自动截取视频第一帧（无需后端改动） #

这个方案纯前端实现，不用折腾服务器，原理是用一个临时视频加载源文件，截取第一帧转为图片后设置给原视频的poster。

结合你的现有代码，添加这段JS即可：

document.addEventListener('DOMContentLoaded', function() {
  const targetVideo = document.getElementById('player1');
  const videoSrc = targetVideo.querySelector('source').src;
  
  // 创建临时视频元素，避免干扰原视频的预加载状态
  const tempVideo = document.createElement('video');
  tempVideo.crossOrigin = 'anonymous'; // 若视频跨域，需确保服务器配置了CORS
  tempVideo.src = videoSrc;
  
  // 视频加载到第一帧时触发截图
  tempVideo.addEventListener('loadeddata', function() {
    const canvas = document.createElement('canvas');
    canvas.width = targetVideo.videoWidth || 640; // 兜底宽度
    canvas.height = targetVideo.videoHeight || 360; // 兜底高度
    const ctx = canvas.getContext('2d');
    ctx.drawImage(tempVideo, 0, 0, canvas.width, canvas.height);
    
    // 将截图转为base64，设置为原视频的poster
    targetVideo.poster = canvas.toDataURL('image/jpeg', 0.8);
    
    // 清理临时资源
    tempVideo.remove();
  });
});

注意事项：如果你的视频存放在不同域名下，需要在视频服务器配置CORS允许跨域访问；原视频的preload="none"不会被影响，因为我们用的是独立的临时视频加载资源。

方法2：后端预生成视频截图（生产环境推荐） #

前端方案在网络较慢时可能会有短暂空白，生产环境更推荐提前用后端工具生成截图，这样用户打开页面就能看到海报。最常用的工具是FFmpeg，你可以在PHP里调用它来生成视频第一帧：

<?php
$videoPath = $domain_root . '/images/' . $value['btitle'];
$posterFileName = pathinfo($value['btitle'], PATHINFO_FILENAME) . '_poster.jpg';
$posterPath = $domain_root . '/images/' . $posterFileName;

// 先检查截图是否已存在，避免重复生成
if (!file_exists($posterPath)) {
    // 调用FFmpeg命令截取第一帧，-q:v 2控制图片质量（数值越小质量越高）
    exec("ffmpeg -i \"$videoPath\" -vframes 1 -q:v 2 \"$posterPath\"");
}
?>

<video id="player1" width="640" height="360" style="max-width:100%;" 
       poster="<?php echo $posterPath;?>" preload="none" controls playsinline webkit-playsinline>
  <source src="<?php echo $videoPath;?>" type="video/mp4">
  <source src="<?php echo $videoPath;?>" type="video/ogg">
  <track srclang="en" kind="subtitles" src="<?php echo $domain_root;?>/mediaelement.vtt">
  <track srclang="en" kind="chapters" src="<?php echo $domain_root;?>/chapters.vtt">
</video>

注意事项：需要在你的服务器上安装FFmpeg；可以配合定时任务批量生成所有视频的截图，避免每次请求都生成；如果视频更新了，记得删除旧的截图重新生成。

方法3：默认占位图兜底（快速应急方案） #

如果暂时不想写复杂代码，也可以给视频元素加一个默认背景图作为兜底，至少不会完全空白，等用户点击播放时再隐藏背景：

首先加CSS样式：

#player1 {
  background: url('/path/to/your-default-poster.jpg') center/cover no-repeat;
}
#player1.is-playing {
  background: none;
}

然后加一小段JS监听播放事件：

const video = document.getElementById('player1');
video.addEventListener('play', () => {
  video.classList.add('is-playing');
});

这样即使截图还没加载出来，用户也能看到一个默认的占位区域，体验会好很多。

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