在 HTML 中为视频字幕添加样式,可以使用 WebVTT(Web Video Text Tracks)格式。WebVTT 是一种用于描述视频字幕文本、样式和时间轴的格式。以下是如何为视频字幕添加样式的步骤:
<video controls>
<source src="video.mp4" type="video/mp4">
<track label="English" kind="subtitles" srclang="en" src="subtitles.vtt">
</video>
在上面的代码中,<track>
元素用于插入字幕。label
属性描述了字幕的语言,kind
属性为 subtitles
表示字幕,srclang
属性描述了字幕的语言代码,src
属性指向含有字幕的 WebVTT 文件。
WEBVTT
00:00:00.000 --> 00:00:05.000
<span class="subtitle">This is a subtitle</span>
00:00:05.000 --> 00:00:10.000
<span class="subtitle highlight">This is a highlighted subtitle</span>
在上面的代码中,<span>
元素用于为字幕添加样式。.subtitle
类定义了字幕的默认样式,.highlight
类定义了字幕的高亮样式。
.subtitle {
font-size: 1.2em;
color: #fff;
}
.highlight {
background-color: yellow;
}
在上面的代码中,.subtitle
类定义了字幕的默认样式,.highlight
类定义了字幕的高亮样式。你可以根据自己的需要调整样式。
最后,你应该将 WebVTT 文件保存为 .vtt
格式,并将其与视频文件一起上传到服务器。
请注意,WebVTT 可能不被所有浏览器支持,请查看浏览器兼容性列表以获取更多详细信息。