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:
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 -> Pro Features -> Chapters. Tick the box and click Save All Changes. Now you can open the shortcode editor, and you will find the Chapters part at the bottom. 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 with 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://foliovision.com/images/2015/01/chapters.vtt" splash="https://i.ytimg.com/vi/Vpg9yizPP_g/hqdefault.jpg" caption="This Is the Moment in 4K"]
As a requirement of the VTT standard, make sure that a VTT file is located on the same server as the website showing it, or it uses a loose cross-origin policy. So if you want to use the above shortcode on your site, you have to download the file from https://foliovision.com/images/2015/01/chapters.vtt to your server first.
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" as the first line, followed by a line feed. Timing cues 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. The timing cues are on their own in a line followed by a line feed. Immediately following the time cues 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.
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
If you need to load the chapters from a different domain than your website, add the following .htaccess rule:
<FilesMatch ".vtt"> Header set Access-Control-Allow-Origin "*" </FilesMatch>
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 correct cross-domain access.
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.