生成Jwplayer的Tooltip Thumbnails选项的所有文件(.vtt + sprite)

Question

为Jwplayer的工具提示缩略图生成".VTT"文件和附加的jpg sprite的最佳方法是什么(http://www.jwplayer.com/blog/building-tooltip-thumbnails-with-encodingcom/-？

我知道如何使用php制作图像精灵,但我不知道如何用第二个时间制作每个视频的截图..我认为必须有一个服务器工具来完成所有任务但我无法找到它.

谢谢

Answer 1

我写了一个脚本来完成这个任务.给定视频文件(MP4或M4v),生成缩略图图像,压缩为精灵,并生成与JWPlayer工具提示缩略图兼容的VTT文件.所有图像处理都使用来自ffmpeg,ImageMagick以及可选的sips和optipng的工具.WebVTT生成部分,我不得不写.

您必须至少安装ffmpeg&imagemagick才能使用它.

Github代码在这里:https://github.com/vlanard/videoscripts (在sprites /下).

基本要点是:

1. 创建一堆缩略图,例如每隔45秒从视频中删除一次

   ffmpeg -i ../archive/myvideofile.mp4 -f image2 -bt 20M -vf fps=1/45 thumbs/myvideofile/tv%03d.png 
   

2. 将这些缩略图调整为较小,例如100像素宽

   sips --resampleWidth 100 thumbs/myvideofile/tv001.png thumbs/myvideofile/tv002.png thumbs/myvideofile/tv003.png
   

   或者,如果sips不可用,请使用imageMagick实用程序:

   mogrify -geometry 100x thumbs/myvideofile/tv001.png thumbs/myvideofile/tv002.png thumbs/myvideofile/tv003.png
   

3. 使用ImageMagick实用程序获取其中一个缩略图的高度和宽度尺寸,以用作网格坐标的基础

   identify -format "%g - %f" thumbs/myvideofile/tv001.png 
   

   返回输出如:100x55 + 0 + 0 - tv001.png

   从中解析100和55作为我们的宽度和高度,以及每个缩略图的一般几何(W,H,X,Y)

4. 然后,我们从各个缩略图生成单个spritemap.我们确定目标网格大小(例如2x2,8x8)以适应我们为此视频生成的缩略图数量,以及使用ImageMagick实用程序传递精灵几何体

   montage thumbs/myvideofile/tv*.png -tile 2x2 -geometry 100x55+0+0 thumbs/myvideofile/myvideofile_sprite.png
   

5. 可选地,我们可以在此处运行额外的压缩步骤以使sprite更小

   optipng thumbs/myvideofile/myvideofile_sprite.png
   

6. 然后,我们根据我们创建的缩略图的数量生成一个VTT文件,使用我们用于间隔缩略图标记每个时间段的间隔,并使用我们的精灵中映射​​到相关片段的每个连续图像的已知坐标.