This is the fifth day of my participation in the August More text Challenge. For details, see: August More Text Challenge.

preface

About the SSD series: Some interesting stuff on the front end, designed for 3-10 minutes, gain without being tired.

Subtitles, you’ve seen it, in fact, you can, really can, really can. It’s not hard. It’s not hard. It’s not hard. Let’s do some interesting bullet screens together.

Source code: custom subtitles

Subtitle effect demonstration

Subtitle and special character presentation

The following subtitle effect does not use any JS code.

Because the GIF video file is too large, it is split in two.

Captioning demo

Also supports a variety of subtitles, as shown below to switch subtitles:

The principle ofWebVTT

The interpretation of the MDN

Web Video Text Tracking Format (WebVTT) is a format that uses theelement to display timed text tracks, such as subtitles or titles. The main use of the WebVTT file is to add text superposition to

Basic use:

    <video id="videoEL" controls autoplay crossorigin="anonymous" src="./gg.mp4" width="500">
        <track default src="./zh.vtt" label="Chinese Subtitles">
        <track default src="./en.vtt" label="English subtitles">
    </video>
Copy the code

As you can see, track is a sub-label of video, and its SRC attribute refers to a VTT file. Note the label attribute, which is the value of the title when switching subtitles.

So the VTT file in the next chapter is the focus.

VTT file

Let’s start with a sample paragraph:

WEBVTT 00:00.400 --> 00:00.900 line:38% position:35%Copy the code

There are many specifications for VTT file writing, and we will seize the three core elements of TSP:

  1. Time T
  2. The style of S
  3. Position P

Connect: subtitles when, in what position, what posture appeared.

time

When should the subtitle appear? I think you can understand it by watching it. [Start] –> [End]

00:00.400 -> 00:00.900 // 400ms-900msCopy the code

As for the meaning of each letter, I think it can be understood as the front end.

  • mm:ss.ttt
  • hh:mm:ss.ttt

style

Is the subtitle with what body posture outstanding

The way styles are defined

We demonstrated that the effect is clearly colored, so there must be some place to define the style. There are two ways to define styles

  1. Plugin styles, written in the CSS file or style node

The following code defines the default subtitle style

video::cue {
    background-color: transparent;
    color: yellow;
    font-size: 20px;
    text-shadow: peachpuff 0 1px;
}
Copy the code
  1. Inline styles are the styles that are written in VTT files

Here is the default subtitle STYLE written in the VTT file. Note that it begins with STYLE

STYLE
::cue {
    background-color: transparent;
    color: yellow;
    font-size: 20px;
    text-shadow: peachpuff 0 1px;
}
Copy the code

Multiple subtitle styles

The above styles only refer to the default style, and there are two colors on the captioning effect, how can this be done, the answer is simple, you can also customize the captioning style

Format is as follows:

<c.classname>text</c>
Copy the code

Let’s look at a complete piece of code and make the subtitles white and have a shadow effect.

VTT file:

00:00.200 --> 00:00.800 line:58% position:80%
<c.mn>大块头</c.mn>
Copy the code

Style files: c. mm is the key.

 video::cue(c.mn) {  
    color: #FFF;
    text-shadow: peachpuff 0 1px;
}
Copy the code

Properties that define styles

Although you can customize the style, mainly the font, background color, outline, text related properties. See also :: Cue CSS3 animation, you don’t think about it.

location

Where does the subtitle appear

Subtitles can be displayed horizontally or vertically.

line

Specifies where the text is displayed vertically. If vertical, the line specifies where the text is displayed horizontally.

position

Specifies where the text will be displayed horizontally. If set to vertical, position specifies the position where the text will be displayed vertically.

Look at a code analysis:

The caption appears 38 percent to the top, 35 percent to the left.

00:00.400 --> 00:00.900 line:38% position:35%Copy the code

other

At this point, you have three elements to handle most situations. Are there other optional bytes-order tags, comments, etc. Important? Of course it does. It only matters when it’s needed.

The complete code

Yes, it’s that simple.

The code for the full demo video is attached:

    <style>
        video::cue {
            background-color: transparent;
            color: yellow;
            font-size: 20px;
            text-shadow: peachpuff 0 1px;
        }

        video::cue(c.mn) {
            color: #FFF;
            text-shadow: peachpuff 0 1px;
        }
    </style>
    
     <video id="videoEL" controls autoplay crossorigin="anonymous" src="./gg.mp4" width="500">
        <track default src="./zh.vtt" label="Chinese Subtitles">
        <track default src="./en.vtt" label="English subtitles">
    </video>
Copy the code
WEBVTT 00:00.400 --> 00:00.900 line:38% position:35% --> 00:03.000 --> 00:04.800 line:34% position:30% Line :34% position:30% find lesson 00:00.200 --> 00:00.800 line:58% position:80% < c.n > Big </ c.n > 00:01.500 --> 00:02.000 </ c.n > 00:03.000 </ c.n > 00:03.000 </ c.n > 00:04.000 --> 00:04.800 line:58% position:80% </ c.n > 00:04.800 line:58% position:80% </ c.n > 00:04.800 line:58% position:80% </ c.n > 00:05.000 --> 00:06.000 line:58% Position :35% 🔨🔨 00:07.201 --> 00:07.400 line:58% Position :35% 💔 00:07.401 --> 00:07.800 💔 line: position: 58% 35%Copy the code

Write in the last

Writing is not easy. Your words and comments are your best efforts.

WebVTT_API HTML5 video subtitle use and production