List of topics in this guide:
FV Player Pro now supports the rendering of chapter markers. This feature is particularly useful for long form video in case you want to segment it into discreet sections and let your viewer find quickly what he likes or just browse through the video.
Here is a live example:
Foliovision Promo Video
How to Use the VTT Chapters
You can easily upload the VTT file via the shortcode editor. First, you have to turn on this option in Settings -> FV Player Pro -> Post Interface Options -> Chapters. Tick the box and click Save All Changes. Now you can open the shortcode editor, and you will find the Chapters part in the Subtitles menu. Click Add Chapters to upload the VTT file. This feature works for one video only right now, so you will not be able to use it in a playlist.
Another option is to add chapters=”http://your-site.com/your-path/your-file.vtt” to your shortcode to use the particular chapters. Example:
[fvplayer src="https://www.youtube.com/watch?v=Vpg9yizPP_g" chapters="https://cdn.foliovision.com/images/2015/01/chapters.vtt" splash="https://i.ytimg.com/vi/Vpg9yizPP_g/hqdefault.jpg" caption="This Is the Moment in 4K"]
The VTT standard requires that a VTT file is located on the same server as the website where it is posted.
If you need to load the chapters 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.
How to Create a Chapter List Underneath The Player
Underneath the example video above, you can see a list of chapters with included timestamps. By default, chapters only show up as little circles on the timeline, or as a menu when in fullscreen mode. Creating this list is a FV Player Pro feature.
To turn on the chapters list, go to FV Player -> Settings -> Pro Features and enable the “Chapters below player” option:
How to Create a VTT File
It is very easy. This format is easy to understand and can be authored with a simple text editor. The file starts with “WEBVTT” in the first line, which specifies the file type. That is followed by a blank line. The next line comprises of timing cues, which are in “HH:MM:SS.sss” format. The start and end time cues are separated by a single space, two hyphens and a greater than sign ( –> ), and then another space. In the next line is the caption text. Text captions can be one or more lines. The MIME type that is used on a server is “text/vtt”.
Note: Make sure that the VTT file has the standard UTF-8 character encoding.
Example:
WEBVTT 00:00:01.878 --> 00:00:05.334 Introduction 00:00:08.608 --> 00:00:15.296 This video will show you how to use cue points
Troubleshooting
If the chapters are not displaying, make sure the file with chapters is using correct format and is placed on the same server as the web-site. Also make sure you are using a correct cross-domain access.
If the VTT files are distributed through a CDN, check if the correct CORS headers are enabled. On how to do that, follow this guide.
The domain name in chapters (domain name and whether it uses www or not) and protocol (http:// or https://) must match with the permalink in the post.
Leave a Reply