从标准html5视频播放器生成缩略图?

时间:2014-02-07 04:19:06

标签: html html5 video html5-video thumbnails

我有一个标准的html5视频播放器,但在播放视频之前没有显示缩略图(类似于YouTube的工作方式)。是否可以获得缩略图?我正在考虑拍摄视频的第一帧并显示,但我不确定是否可以这样做。有什么想法吗?

1 个答案:

答案 0 :(得分:1)

使用HTML5 <video>元素,您可以使用poster属性来执行此操作,例如:

<video id="myVideo" controls poster="http://{uri}/images/myVideoPoster.png">...

但您仍需要生成海报图片。为此你可以使用类似ffmpeg之类的东西来提取一个帧 - 要么是第一个,要么是一个几秒钟,以显示例如:

ffmpeg -i {input file} -ss 00:02:30 -vframes 1 -s 128x72 {image}

-ss是帧的时间戳,-s参数是输出图像的大小

根据您的平台,您可以使用回形针(例如https://stackoverflow.com/questions/21341723/using-paperclip-with-video-upload-to-get-poster/21368348#21368348)自动执行此操作