How to use and create HTML5 video subtitles

HTML5 allows us to specify subtitles for videos using elements. Various properties of this element allow us to specify things like the type of content we are adding, the language it is in and of course a reference to the text file that contains the actual subtitle information.

 <video id=video controls> <source src=./step.mp4 type=video/mp4> <track label=中文字幕kind=subtitles chapters metadata srclang=zh src=./caption.vtt default> <track label=ABC kind=subtitles srclang=de src=./caption1.vtt> <track label=Number kind=subtitles srclang=es src=./caption2.vtt> </video>

• kind is assigned a value subtitles, indicating the type of content the file contains.
• The label is given a value indicating the language in which this subtitle set is written - such as English or Deutsch - and these labels will appear in the user interface to allow the user to easily select the language they want to see the subtitles in.
• src is assigned in each case a valid URL pointing to the relevant WebVTT subtitle file.
• srclang indicates the language in which the content of each subtitle file is located.
• The default attribute is set on the English element to indicate to the browser that this is the default subtitle file definition to be used when subtitles are turned on and the user has not made a specific selection.

The file containing the actual subtitle data is a simple text file that follows a specified format, in this case the Web Video Text Track (WebVTT) format. The WebVTT plug-in specification is still under development, but the main parts of it are stable, so we can use it today.

Video providers such as Blender Foundation provide subtitles and subtitles in text format for their videos, but usually in SubRip Text (SRT) format. These can be converted to WebVTT using an online converter such as srt2vtt.

The file extension is ==.vtt==

==.vtt==The MIME type of the file is text/vtt

Under Chrome and Firefox browsers, .vtt subtitles can be loaded and displayed without any obstacles. However, for IE10+ browsers, although .vtt subtitles are also supported, the MIME type needs to be defined, otherwise the WebVTT format will be ignored. A simpler way is to add an .htaccess file under the folder where the subtitles are located, and write AddType text/vtt .vtt in it.

//You must declare ==WEBVTT== at the beginning of the file

WEBVTT

//Start time-->End time, unit is milliseconds

00:00:00.001 --> 00:00:03.000

// Display subtitles corresponding to the above time. The style can be set separately. aa is similar to the class name.

<v aa>Nine Nether Yinling 1111</v>

00:00:03.001 --> 00:00:06.000

<v bb>Gods and Demons 2222</v>

00:00:06.001 --> 00:00:09.000

With my blood body 3333

00:00:09.001 --> 00:00:12.000

Sacrifice 4444

00:00:12.001 --> 00:00:15.000

Three lives and seven lives 5555

The ::cue pseudo element is the key to targeting individual text track cues for styling purposes, as it matches any defined cue. There are only a few CSS properties that can be applied to text hints:

• color
• opacity
• visibility
• text-decoration
• text-shadow
• background shorthand performance
• outline shorthand performance
• font shorthand attribute
• line-height
• white-space

==Note: ::cue's cue styles currently work on Chrome, Opera, and Safari, but not yet on Firefox. ==

WebVTT also supports some HTML tags for style control. Common ones include sound ==v== tag, color ==c== tag, bold ==b== tag, italic ==i== tag, and underline ==u == tag, as well as ==ruby== and ==lang== tags, etc.

 //Set the style of subtitles video::cue{ background-color:transparent; color:white; font-size:20px; line-height: 100px;}//Set the style of single-line subtitles video::cue(v[voice= aa]){ color:green;}video::cue(v[voice=bb]){ color:rgb(0, 26, 128);}

IE

By default, Internet Explorer 10+ subtitles are enabled, and the default control contains a button and a menu that provides the same functionality as the menu we just built. The default attribute is also supported.

==Note: IE will completely ignore WebVTT files unless you define a MIME type. This can be easily done by adding a .htaccess file to the appropriate directory containing AddType text/vtt .vtt==

Safari

Safari 6.1+ has similar support for Internet Explorer 10+, showing a menu with different available options and adding an automatic option that allows the browser to make a selection.

Chrome and Opera

These browsers have similar implementations: subtitles are enabled by default, and the default control set contains a 'cc' button that turns subtitles on and off. Chrome and Opera ignore the attribute on the element default and instead try to match the browser's language to the subtitle's language

The above is the method of using and making HTML5 video subtitles introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!