Warpwire's video and audio player supports some WebVTT custom formatting, including text color and background color.
You can define text color in a WebVTT file with the following syntax:
WEBVTT
02:00.000 --> 02:05.000
<c.yellow>This is yellow text</c>
You can define text background color in a WebVTT file with the following syntax:
WEBVTT
02:00.000 --> 02:05.000
<bg.blue>This text has a blue background</c>
Here's an example with both text color and text background color defined:
WEBVTT
02:00.000 --> 02:05.000
<c.yellow.bg_blue>This is yellow text on a blue background</c>
Here's a visual look at captions with the above configuration:
The following colors are supported. Use the class name in your VTT file:
Class Name | 'Color' Value |
---|---|
white | rgba(255,255,255,1) |
lime | rgba(0,255,0,1) |
cyan | rgba(0,255,255,1) |
red | rgba(255,0,0,1) |
yellow | rgba(255,255,0,1) |
magenta | rgba(255,0,255,1) |
blue | rgba(0,0,255,1) |
black | rgba(0,0,0,1) |
See also: Introduction to Closed Captions.