MP4 video thumbnails¶

About video thumbnails¶

Why use video thumbnails

If you want to minimize system overhead, use our JPEG-less video thumbnails. Video thumbnails eliminate the drawbacks of JPEG thumbnails: increased CPU usage and increased disk space usage. We can make screenshots available without creating JPEG files. This way, the overhead is almost 0%.

How video thumbnails work

JPEG-less video thumbnails are essentially fragments of H.264 video each containing one frame. If you have an H.264 stream with keyframes, then you already have compressed images in it — keyframes.

Because Flussonic can obtain these images from a video on the fly, there's no need to store them separately. There is no need to produce them either — so CPU time is saved immensely. All you need is to access ready keyframes.

Flussonic takes the first keyframe from each segment and creates an MP4 file from it. This file is sent to the browser, where it is then shown as a picture. This is a video thumbnail.

An example of code for showing a video thumbnail in a browser:

<video src="http://flussonic:80/clock/preview.mp4" style="width: 640px; height: 480px;" autoplay />

When you insert such a tag to your HTML page, the page will show the thumbnail. It is also possible to access video thumbnails on mobile browsers, or in DVR and VOD player.

How to access video thumbnails¶

To view a thumbnail in a web browser, you should request it by using a special URL. You can use this URL in the HTML tag <video>.

In general, URLs look like this:

http://<domain>/<stream name or path to file>/preview.mp4

Such URLs differ for live, VoD, and DVR thumbnails depending on the place in a video that you want to show on a thumbnail. But they always contain a preview.mp4 file. There are 4 situations:

1. Live video thumbnails (of a live stream) – in this case, the very latest keyframe is used to create a thumbnail.

   http://FLUSSONIC-IP:80/STREAM_NAME/preview.mp4

2. Video thumbnails of a DVR archive. You can obtain them by specifying date and time as part of URL. See details later on this page.

   http://FLUSSONIC-IP:80/STREAM_NAME/1654242430-preview.mp4

3. Video thumbnails of a file (VoD). You can obtain them by specifying time passed from the befinning of the file (HH-MM-SS). See details later on this page.

   http://FLUSSONIC-IP:80/vod/bunny.mp4/preview-01-23-55.mp4

4. A video thumbnail of the first keyframe in a file. The drawback is that the first keyframe sometimes contains a black picture.

   http://FLUSSONIC-IP:80/vod/bunny.mp4/preview.mp4

Video thumbnails of files in VoD¶

You can get Flussonic's video thumbnails of any place in a file, not only the beginning. You specify the time and Flussonic shows the nearest keyframe. Technically, Flussonic takes only one (the first) keyframe of each segment.

To access a thumbnail, add time to the URL and put this URL in a <video> tag that you insert into a web page. Use the following syntax for the URL:

http://<domain>/<path>/<filename>.mp4/preview-<Hour-Minute-Second>.mp4

To show the very first keyframe, use the URL without time:

http://<domain>/<path>/<filename>.mp4/preview.mp4

This example shows a thumbnail of the video at 02:24:45:

<video src="http://flussonic:80/vod/bunny.mp4/preview-02-24-45.mp4" style="width: 640px; height: 480px;" autoplay />

Flussonic redirects to the URL that has a calculated keyframe number instead of the specified time.

Video thumbnails of DVR¶

It is possible to access video thumbnails from DVR in the same manner as with JPEG thumbnails: for the UTC timestamp 1654242430 (which corresponds to 2022 June 3, 07:47:10 GMT) you need to request:

http://FLUSSONIC-IP:80/STREAM_NAME/1654242430-preview.mp4

The old human-readable GMT format is also supported for compatibility:

http://FLUSSONIC-IP:80/2022/06/03/07/47/10-preview.mp4

But we have implemented a more convenient way to access these thumbnails. If you know that somewhere in 10 minutes after a point in time you have recorded video, you can request inexistent URL (with approximate time). Flussonic will find the existing keyframe in that period and return it. This approach will save your cache: the browser will make two requests, but only the existing keyframe will be saved to the browser cache, it prevents it from spoiling.

For example, you can request an inexistent URL for a moment that is 10 minutes earlier than in the previous example:

http://FLUSSONIC-IP:80/STREAM_NAME/1654241830-preview.mp4

For existing thumbnail Flussonic Media Server will return the header X-Thumbnail-Utc: 1654242430, you can use it to understand real URL of thumbnails as browser will not tell you about the redirect.

Video thumbnails on mobile devices¶

Just use the below code to show video thumbnails on mobile devices:

<video src="http://flussonic:80/clock/preview.mp4" autoplay playsinline /></video>

The playsinline parameter insures that the preview is displayed correctly (for example, does not overlap the elements placed over it).