The HW Blog

Want to be updated? @opencoconut | Feed

Announcing support of sprite, vtt and new every options for thumbnail generation

Bruno Celeste (@brunoceleste)

October 17, 2018 Features

New API version: 2018-10-17

We've worked hard on the preview API so your users can have the best experience. Today, we are announcing 3 new features just for thumbnails that we hope you and your users will enjoy.

Generate thumbnails every 10 seconds

It's now possible to generate thumbnails every X seconds, so you won't have to calculate offsets yourself. We do the math for you.

-> jpg:160x = $s3/sprite.jpg, every=10

If you set every=0, we even calculate the right gap according to the following rules:

  • every 2 sec if duration <= 2 min
  • every 5 sec if duration <= 10 min
  • every 10 sec if duration <= 30 min
  • every 20 sec if duration <= 60 min
  • every 30 sec if duration > 60 min

A single Sprite image instead of hundred images is better

It's faster to retrieve one "big" image instead of small hundred images from an external resource, that's why we've added the new sprite option. Here is an example:

sprite


To generate it, it's easy:

-> jpg:160x = $s3/sprite.jpg, every=5, sprite=yes

I want my player to show toolip thumbnails like Netflix does!

To make your HTML5 player shows the right thumbnail at the right time, you need a WebVTT file which includes a list of cues with the corresponding individual thumbnails or single sprite file with the right coordinates. We provide both!

Here is an example of a WebVTT file:

WEBVTT

00:00:00.000 --> 00:00:05.000
sprite.jpg#xywh=0,0,160,90

00:00:05.000 --> 00:00:10.000
sprite.jpg#xywh=160,0,160,90

00:00:10.000 --> 00:00:15.000
sprite.jpg#xywh=320,0,160,90

00:00:15.000 --> 00:00:20.000
sprite.jpg#xywh=480,0,160,90

00:00:20.000 --> 00:00:25.000
sprite.jpg#xywh=0,90,160,90

To generate it along with a sprite file:

-> jpg:160x = $s3/sprite.jpg, every=5, sprite=yes, vtt=yes

You can read the documentation about all these cool features here.



Any Comment? Contact us via our contact page