In this guide you will find:
- What are Timeline Previews
- Timeline previews with FV Player Coconut
- Creating the VTT file and Sprite Image
- How to Insert Timeline Previews into FV Player Pro
What are Timeline Previews
Timeline previews, also called preview thumbnails, are small compressed pictures that pop up when you hover over the timeline, showing you what is in the exact moment of the video. This feature gives you the ability to quickly browse through the content of a video without having to guess by clicking and waiting for the video to load again. Timeline previews come in handy especially for longer videos.
Preview thumbnail of 02:14 while the video is stopped at 00:02
This feature is only available for users of FV Player Pro. FV Player Pro uses previews obtained from VTT files. Therefore, you will have to get and insert the VTT files into the shortcode editor.
There are two ways to do this:
Timeline previews with FV Player Coconut
If you are encoding your videos via FV Player Coconut, timeline previews get created and loaded up automatically. Therefore, if you do not wish to use timeline previews in a given video encoded by FV Player Coconut, you will have to erase the .vtt file from the video editor manually.
DEMO:
Creating the VTT File and Sprite Images
If you are not using FV Player Coconut, you can insert the files manually. We advise you use services or software to create these files. It is better not to create these files manually, as having to screenshot your videos to create sprite images and write an VTT file pointing to them is incredibly time consuming.
You can use various online services, such as Videohop (free) or software, such as Video Thumbnails Maker (commercial), which create the required files from your video. These services will create both sprite images and VTT files that link to them.
In the context of timeline previews, sprite image is a collage of frames, from which the VTT file can fetch the preview images and give them the correct timing and size. It saves you the space of having to upload each one separately.
A sprite image
VTT format is easy to comprehend and can be authored by a simple text editor. This is what the beginning of the VTT file for the video underneath looks like. These entries are the coordinates to first 4 pictures in the sprite image:
WEBVTT 1 00:00:00.000 --> 00:00:01.000 160p-00001.jpg#xywh=0,0,284,160 2 00:00:01.000 --> 00:00:02.000 160p-00001.jpg#xywh=284,0,284,160 3 00:00:02.000 --> 00:00:03.000 160p-00001.jpg#xywh=568,0,284,160 4 00:00:03.000 --> 00:00:04.000 160p-00001.jpg#xywh=852,0,284,160
This one links to the sprite image above, called “160-p-0001.jpg”, which is hosted in the WordPress library of the same site. The first two numbers are the coordinates to the frame in a sprite image, the other two are size dimensions of the preview image. If you were to link the VTT file to an externally hosted picture, you would link it to a web address.
Then you just upload the generated VTT file and sprite images to your WordPress media library, or upload it somewhere else and insert the link.
Note: If you need to load the previews from a different domain than your website, you will need to enable CORS headers on it. You will learn how to do that in this guide.
DEMO:
How to Insert Timeline Previews into FV Player Pro
To upload or insert the link to your VTT file, open the FV Player Pro shortcode editor and go to the Subtitle tab.
Timeline previews in the FV Player shortcode editor
If you encode your videos with FV Player Coconut, there will already be a link to the .vtt file. Otherwise, insert your link into the field or click “Add VTT” and upload your file.
