阿里云播放器支持标准WebVTT流的双端解析渲染,可读取CSS样式并按标准实现双端统一字幕样式。并支持单文件多文本样式,适用于角色对话区分、重点内容强调及特殊视觉效果等场景。
以下为示例WebVTT文件:
REGION:显示区域定义。
STYLE:字体样式定义(首项为默认样式)。
WEBVTT
REGION
id:bottom
width:70.000000%
lines:3
viewportanchor:15.000000%,95.000000%
regionanchor:0.000000%,100.000000%
scroll:up
STYLE
::cue {
color: white;
font-size: 70%;
font-family: Noto Sans;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.2);
}
::cue(.font1) {
color: rgba(255, 255, 255, 1);
font-weight: bold;
font-family: Noto Sans;
outline-width: 3px;
outline-color: rgba(0, 0, 0, 1);
}
::cue(.font2) {
color: rgba(252, 255, 101, 1);
font-style: bold;
font-family: Noto Sans;
outline-width: 3px;
outline-color: rgba(0, 0, 0, 1);
}
::cue(.font3) {
color: rgba(255, 191 23, 1);
font-style: bold;
font-family: Noto Sans;
outline-width: 3px;
outline-color: rgba(183, 28, 28, 1);
}
00:00:00.200 --> 00:00:01.800 region:bottom align:center
被告人薄寒时
00:00:01.800 --> 00:00:03.200 region:bottom align:center
你还有什么话要说
00:00:04.100 --> 00:00:04.800 region:bottom align:center
我
00:00:11.200 --> 00:00:12.200 region:bottom align:center
00:00:14.500 --> 00:00:16.200 region:bottom align:center
被告人薄寒时
...为文字片段指定特定样式,请参照如下设置: