生成Jwplayer的工具提示缩略图选项的所有文件（.vtt + sprite） [英] Generate all the files (.vtt + sprite) for the Tooltip Thumbnails options of Jwplayer

问题描述

为Jwplayer的工具提示缩略图（ http://www.jwplayer.com/blog/building-tooltip-thumbnails-with-encodingcom/- ？

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

谢谢

解决方案

我写了一个脚本来做这个任务，给一个视频文件（MP4或M4v）生成缩略图，压缩成一个sprite，并生成一个与JWPlayer工具提示缩略图兼容的VTT文件。使用ffmpeg，ImageMagick中的工具，以及可选的sip和optipng。WebVTT生成部分，我不得不写。

你将不得不安装ffmpeg& imagemagick，至少使用这个。

Github代码在这里： https：/ /github.com/vlanard/videoscripts （精灵/).

基本要点是：

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 
     

   或者如果不能使用，请使用imageMagick实用程序：

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




3. 获取高度&使用ImageMagick实用程序

    识别格式％g的缩略图之一的宽度尺寸 - ％fthumbs / 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 
     pre> 




5. 我们可以在此处运行一个额外的压缩步骤，使精灵更小

     optipng thumbs / myvideofile / myvideofile_sprite.png 
     




6. 然后我们生成一个基于我们创建的缩略图数量的VTT文件，使用
   我们用来缩放缩略图来标记每个时间段的间隔，
   使用我们的精灵内每个连续图像的已知坐标，映射到
   相关联的段。

What is the best way to generate the ".VTT" file and the jpg sprite attached with it for the Tooltip Thumbnails of Jwplayer (http://www.jwplayer.com/blog/building-tooltip-thumbnails-with-encodingcom/- ?

I know how to make an image sprite with php, but i dont know how to make the screenshots of each video with the time in second.. I think there must be a server tool to do all the tasks it but i cant find it.

Thanks

解决方案

I wrote a script to do this task. Given a video file (MP4 or M4v), generate thumbnail images, compress into a sprite, and generate a VTT file compatible with JWPlayer tooltip thumbnails. All of the image manipulation uses tools from ffmpeg, ImageMagick, and optionally sips and optipng. The WebVTT generation part, I had to write.

You will have to install ffmpeg & imagemagick, at a minimum to use this.

Github code is here: https://github.com/vlanard/videoscripts (under sprites/).

The basic gist is:

1. Create a bunch of thumbnails, e.g. every 45th second from a video

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

2. Resize those thumbnails to be small, e.g. 100pixels wide

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

   OR if sips not available, use imageMagick utility:

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

3. Get the height & width dimensions of one of the thumbnails to use as the basis of our grid coordinates, using ImageMagick utility

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

   which returns output like : 100x55+0+0 - tv001.png

   from which we parse 100 and 55 as our Width & Height, and the general geometry of each thumbnail (W, H, X, Y)

4. We then generate our single spritemap from the individual thumbnails. We determine the target grid size (e.g. 2x2, 8x8) to suit the number of thumbnails we generated for this video, as well as passing in the sprite geometry, using an ImageMagick utility

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

5. Optionally we can run an extra compression step here to make the sprite smaller

   optipng thumbs/myvideofile/myvideofile_sprite.png
   

6. We then generate a VTT file based on the number of thumbnails we created, using the interval that we used to space out the thumbnails to label each time segment, and using the known coordinates of each consecutive image within our sprite that maps to the associated segment.

这篇关于生成Jwplayer的工具提示缩略图选项的所有文件（.vtt + sprite）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！