# 视频字幕

提示

视频字幕使用的是 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',
		},
    }
});