使用 ffmpeg 创建一个带有播放图标的缩略图

Question

我想用 ffmpeg 创建一个缩略图，里面有一个播放（如上图；取自 Dan Meyer 网站）以显示它是视频而不是图像。

Answer 1

如果您的用例也适用于网站，则可以分两步完成此操作 - 首先创建缩略图，然后使用 HTML5/CSS 在生成的图像上添加播放按钮的叠加层。

下面将在视频中创建一个 10 秒的缩略图（作为示例）：

ffmpeg -i video.mp4 -ss 00:00:10.0 -vframes 1 thumb1.png

您可以通过 CSS 添加播放按钮，参考您的视频元素，如下所示：

.video a {
   position: absolute;
   background: url("path.../playButton.png");
   height: 20px;
   width: 20px;
   top: 20px;
   left: 20px;
}

使其响应迅速，因此它的位置正确值得考虑 - 这里有一个 post，其中包含更多详细信息：http://douglasgreen.com/demo/responsive-video-play-button/

这种方法的优点是允许您将 PlayButton 的外观和感觉与缩略图生成分开，而且与通过 FFMPEG 进行这两种操作相比，它的处理量可能更少（尽管要确保这必须经过测试和计时，这是创建图像的处理与浏览器处理之间的权衡）。

如果您的用例不是用于网站，或者您想要一次完成所有操作，则以下内容（来自此答案：）应该为您指明正确的方向：

ffmpeg -ss 30 -i movie.mp4 -i play.png -filter_complex \
"[0:v][1:v]overlay=main_w/2-overlay_w/2:main_h/2-overlay_h/2" \
-vframes 1 output.png

Create a thumbnail with play icon inside with ffmpeg