Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

ffmpeg - Generate all the files (.vtt + sprite) for the Tooltip Thumbnails options of Jwplayer

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...