A simple but effective instruction doc which shows how to generate preview thumbnails of a video, and corresponding VTT file.

jwplayer-preview-thumbnails.md

Description

A simple but effective instruction doc which shows how to generate preview thumbnails of a video, and corresponding VTT file, for use within JW Player to allow for toolbar video preview (described in following article. First it shows how to create an image of images (sprite) and then how to create a VTT file belonging to the sprite via Javascript.

A simple but effective command-line tool for generating thumbnails of a video, and corresponding VTT file, for use within JW Player to allow for toolbar video preview.

Demo

Alternatively check the Online Demo

Installation

(1) Generate sprite (jpeg, png) by video file via ImageMagick

• Find out how much images you want to show per specified time intervall. E.g: Lets say your video is 100 seconds long and you want to display every 2% a new thumbnail in the timeline. So the video player needs to display a new thumbnail every 2 seconds (time intervall). In order to get this time intervall you can use VTTCreator.js.

			var vtt = new VTTCreator();
			// values: 100 seconds video length and every 2% new thumbnail to display
			var secsPerImgae = vtt.getSecondsPerImage(100, 2);
			console.log('seconds per image: ' + secsPerImgae);

• Now get ImageMagick and install. Be careful. There are security issues!
• Generate the sprite by following two commands (for Windows):

[Path to ImageMaick]\ffmpeg.exe" -i [path to video file] -r 1/[time intervall] -vf scale=[sprite height]:-1 [path to output dir]\[output file name]%03d.png

// example
"C:\Program Files\ImageMagick-6.9.3-Q16\ffmpeg.exe" -i C:\Users\schaefa\Videos\example-video.mp4 -r 1/0.78 -vf scale=400:-1 C:\Users\schaefa\Videos\example-video%03d.png

[Path to ImageMaick]\montage.exe" [path to video file]\telekom*.png -tile x1 -geometry +0+0 [path to output dir]\[output file name].png

"C:\Program Files\ImageMagick-6.9.3-Q16\montage.exe" C:\Users\schaefa\Videos\example-video*.png -tile x1 -geometry +0+0 C:\Users\schaefa\Videos\example-video-sprite.png

(2) Generate VTT file

• You can use VTTCreator.js to generate VTT content.

			var vtt = new VTTCreator();
			// 400 = sprite width per image 
			// 166 = sprite heigth per image
			// 39 seconds video lenght
			// every 2% (every 2% of video length) display new thumbnail
			var vttContent = vtt.getTextOfVTT('example-video-sprite.png', 400, 166, 39, 2)
			console.log(vttContent);

Now save content to a file and make sure you can access it via Javascript.

(3) Include VTT to JW-Players setup configuration

        <script type="text/javascript">
            var playerInstance = jwplayer('player');
            playerInstance.setup({
			// some config before...
                tracks: [
                { 
                    // thumbnails
                    file: "/assets/thumbnails.vtt", 
                    kind: "thumbnails"
                }]
                // some config after...
               });
        </script>