Video.js basic playback and subtitle settings

Horizontally centered player with fixed height

• Flex achieves horizontal and vertical centering.md

content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>

The following is the completed meaning map

subtitle

• WebVTT Example

To add subtitles to your video, just add That's it, for example

However, you also need to pay attention to the subtitle format

Original subtitles

1
00:00:34,574 --> 00:00:40,305
Movie title: The Ultimate Interview
Translation: Blue

2
00:01:52,800 --> 00:01:54,879
You deserve it

This subtitle cannot be used directly, the following modifications must be made
WEBVTT
1
00:00:34.574 --> 00:00:40.305
Movie title: The Ultimate Interview
Translation: Blue

2
00:01:52.800 --> 00:01:54.879
You deserve it

• Add WEBVTT at the beginning
• Change the comma in the time decimal point to a decimal point

Custom subtitle format

• WebVTT: The Web Video Text Tracks Format

Set to left alignment, yellow text
00:00:00.000 --> 00:00:40.305 line-left align:left
Movie title: The Ultimate Interview
Translation: Blue
CSS

.video-js .vjs-text-track-display .yellow{
color: yellow;
}