How to use and create HTML5 video subtitles

This article mainly introduces the use and production of HTML5 video subtitles. HTML5 allows us to use elements to specify subtitles for videos. Friends in need can refer to

HTML5 allows us to use elements to specify subtitles for videos. 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>

track attribute introduction:

• kind is assigned a value subtitles, indicating The type of content the file contains

• label is given a value indicating the language that the subtitle set is in - such as English or Deutsch - these labels will appear in the user interface to allow users to easily to choose the subtitle language they want to see.

• #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.

WebVTT Subtitle File

The file containing the actual subtitle data is a simple text file that follows a specified format, in this case a 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 the text format of their videos, but usually in SubRip Text (SRT) format. These can be converted to WebVTT using online converters such as srt2vtt.

File format specification:

The suffix name of the file 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 browser, although .vtt subtitles are also supported, the MIME type needs to be defined, otherwise it will Ignore the WebVTT format. 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.

//Must be declared at the beginning of the file ==WEBVTT==
WEBVTT
// Start time --> End time, unit is milliseconds
00:00 ;
00:00:03.001 --> 00:00:06.000
053d7cb071a67aeff6e3edf21e104ddeAll Heavens Gods and Demons 22227304df2b4245f4682191bb80317afa07
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
三生七世5555

Subtitle css style settings

::The key to the cue pseudo element is to target individual text track cues for styling , as it matches any limited club. 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 property
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, and italic ==i == tag, underscore ==u== tag, and ==ruby== and ==lang== tags, etc.

//设置字幕的样式
video::cue{
    background-color:transparent;
    color:white;
    font-size:20px;
    line-height: 100px;
}
// 设置单行字幕的样式 
video::cue(v[voice=aa]){
    color:green;
}
video::cue(v[voice=bb]){
    color:rgb(0, 26, 128);
}

Browser Compatibility

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 with There is a menu of different available options, and an "auto" option has been added to allow 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 default element and instead try to match the browser's language with the subtitle's language

##

The above is the detailed content of How to use and create HTML5 video subtitles. For more information, please follow other related articles on the PHP Chinese website!