# 视频字幕
提示
视频字幕使用的是 html5 track 标签,目前只支持使用 webvtt 格式的字幕文件。
你可以配置一个或者多个 vtt 文件,从而可以选择不同的语言。当存在 vtt 字幕时, mui-player-desktop-plugin.js 会默认读取 track 配置添加设置菜单,前提是浏览器支持 webvtt 文档格式。
查看 webvtt supported (opens new window)。从 这里 (opens new window) 您可以学习到 webvtt 的知识。
# API
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
tracks | Array | [] | 字幕列表 |
tracks.kind | String | subtitles | 指定相关文字的字幕信息 |
tracks.src | String | 字幕 vtt 文件地址 | |
tracks.default | Boolean | false | 是否默认显示该字幕 |
tracks.label | String | 指定字幕使用的语言,该值将出现在用户界面中 | |
tracks.srclang | String | 指定每个字幕轨道使用的语言,例如:srclang="en",srclang="zh-cn" 分别表示字幕文件为英语和简体中文。 | |
# | |||
styles | Object | 自定义字幕样式,查看支持样式 (opens new window) |
# 配置示例
在初始化配置字幕传递 subtitle 对象,接收 tracks 以及 styles 配置
var mp = new MuiPlayer({
container:'#mui-player',
src:'../media/media.mp4',
...
subtitle{
tracks:[
{
kind:'subtitles',
src:'./static/subtitle/sintel-en.vtt',
label:'英语',
srclang:'en',
default:true,
},
{
kind:'subtitles',
src:'./static/subtitle/sintel-de.vtt',
label:'德语',
srclang:'de',
},
{
kind:'subtitles',
src:'./static/subtitle/sintel-es.vtt',
label:'西班牙语',
srclang:'es',
}
],
styles:{ // 字幕默认样式
color:'#FFFFFF',
background:'transparent',
textShadow:'0px 0px 1px #000000',
},
}
});