为 Jwplayer 的 Tooltip Thumbnails 选项生成所有文件(.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 制作图像精灵，但我不知道如何用秒为单位制作每个视频的屏幕截图..我认为必须有一个服务器工具来完成所有任务，但我不能找到它.

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.

谢谢

推荐答案

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

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.

您必须安装 ffmpeg &imagemagick，至少要使用这个.

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

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

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

基本要点是:

1. 创建一堆缩略图，例如视频中每 45 秒一次

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 

将这些缩略图调整为小，例如100 像素宽

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

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

OR if sips not available, use imageMagick utility:

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

获取高度&用作我们网格坐标基础的缩略图之一的宽度尺寸，使用 ImageMagick 实用程序

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 

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

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

从中我们将 100 和 55 解析为我们的 Width &每个缩略图的高度和一般几何形状(W、H、X、Y)

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

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

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

可选地，我们可以在这里运行一个额外的压缩步骤，使精灵变小

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

optipng thumbs/myvideofile/myvideofile_sprite.png

然后我们根据我们创建的缩略图数量生成一个 VTT 文件，使用我们用来隔开缩略图以标记每个时间段的间隔，以及使用我们精灵中每个连续图像的已知坐标映射到关联的细分市场.

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 的 Tooltip Thumbnails 选项生成所有文件(.vtt + sprite)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！