How to Create Thumbnails or Preview for Videos

How to create thumbnails or preview for videos?

Take a look at the ffmpeg-php library. It's the only simple way to manipulate videos of different formats in PHP.

There's also a wrapper called PHP Video Toolkit, you can find it here: http://sourceforge.net/projects/phpvideotoolkit/

How can I create a video preview thumbnail?

Convert n frames to an animated gif. Use a single frame of the video as the default state image and swap on hover.

Stop a gif animation onload, on mouseover start the activation

How to generate video preview thumbnails for use in VideoJS?

Surprised I didn't get a single comment/answer. Either way, after taking quite a few days I was able to find a working solution. At first I thought the solution would be using ffmpeg, however while it did work it was drastically slow. I eventually found the linux tool (available in Windows as well) called mtn (Movie Thumbnailer) found here. This tool was able to to create a sprite image from a two hour movie within about 6 seconds. I used the shell_exec function in php with the -v (verbose) option in order to parse out the time of each thumbnail as such:

mtn -v -P -s 60 .jpg file.ext 2>&1

Once there, it was simple logic, parsing, and math to create the necessary WebVTT file. All of this was done in php natively with the exception of having to use mtn with shell_exec.

This solution works great and is pretty accurate. The only real issue is that the user has to wait a couple of seconds before the video is ready to be watched. I am currently looking at options to load the video first, generate the thumbnails in the background, and incorporate it into the video source once ready.

I hope this solution helps anyone else out there that needs to dynamically generate thumbnails for their video player.

How to generate video preview thumbnails using nodejs and ffmpeg?

You will have to make your own tool for creating the WEBVTT file.
And it's a simple process, you just need to get the information you need and fill it in the following format:

00:00:00.000 --> 00:00:03.000
thumbnails.jpg#xywh=0,0,120,68

and then save the file.

Example:

Let's say you have a video that's 60 seconds long.
You use ffmpeg to generate 10 thumbnails.

You write a short program (in this case Node.js) that loops based on the number of thumbnails following the above format a manner similar to this:

const fs = require('fs')
const moment = require('moment')

let video_length = 60
let number_of_thumbnails = 10
let thumb_interval = video_length/number_of_thumbnails // so 6 seconds per thumbnail

let sprite_width = 600 // Values are assumed based each thumbnail having
let sprite_height = 340 //a width of 120 and a height of 68 with a total of 10

let start_time = moment('00:00:00', "HH:mm:ss.SSS")
let end_time = moment('00:00:00', "HH:mm:ss.SSS").add(thumb_interval , 'seconds')

let thumb_output = "WEBVTT\n\n"

for(let i=0;i<=(sprite_height /68);i++){
  for(let j=0;j<=(sprite_width/120);j++){

    thumb_output +=start_time.format("HH:mm:ss.SSS") +" --> "+ end_time.format("HH:mm:ss.SSS")+"\n"

    thumb_output += "thumbnails.jpg#xywh="+(j*120)+","+(i*68)+",120,68\n\n"

    start_time.add(thumb_interval , 'seconds')
    end_time.add(thumb_interval , 'seconds')
  }
}

fs.writeFileSync('thumbnails.vtt', thumb_output)

The library Moment.js was used for simplifying the time incrementation & format

How to create youtube-like seekbar preview images for HTML video

The thumbnails are actually typically contained in a separate media stream or 'track' that is created on the server side and delivered as part of the streamed video.

The client downloads this stream and when a user seeks, it displays the thumbnail image that is closest to the time the user is seeking to.

You can see a good example of how the player handles this with the dash.js reference player:

• https://reference.dashif.org/dash.js/latest/samples/thumbnails/thumbnails.html

Generating the thumbnails on the fly on the browser would require the video to be delivered, decoded and a frame displayed at the point the user was seeking to which is typically too much to do in the time available to be practical for streamed videos.

What can i use to automate video snapshots

You could use MTN. It can scan whole directories and create thumbnails for every video found.

---

Related Topics