3.6.4 zwplayer字幕使用说明

字幕用于录播文件的播放，即视频文件声音轨道的文字内容，zwplayer支持同时呈现两路字幕（即双字幕），下图是zwplayer同时呈现双字幕的例子：

用户在播放时，通过播放器控制条上的“CC”菜单可以设置开启或者关闭任何一路字幕，如下图所示：

要添加字幕支持，需要调用zwplayer的addSubtitle 方法。建议在播放器加载完视频以后再加载字幕。字幕文件可以是json，srt、vtt与bcc格式，其中srt与vtt格式是大多数视频网站采用的格式，json格式是zwplayer自定义格式；bcc格式是bilibili字幕格式，实际是json。

一个json格式的字幕文件内容样本如下，如果需要给zwplayer提供json字幕，请按如下示例文件的格式制作输出字幕文件。

{
	"font_size": 0.4,
	"font_color": "#FFFFFF",
	"background_alpha": 0.5,
	"background_color": "#9C27B0",
	"Stroke": "none",
	"type": "AIsubtitle",
	"lang": "zh",
	"version": "v1.4.0.4",
	"body": [
		{
		  "from": 7.26,
		  "to": 8.79,
		  "sid": 1,
		  "location": 2,
		  "content": "进入20世纪"
		},
		{
		  "from": 8.79,
		  "to": 12.68,
		  "sid": 2,
		  "location": 2,
		  "content": "中国成为世界舞台上的重要角色"
		}
		{
		  "from": 14.79,
		  "to": 18.68,
		  "sid": 3,
		  "location": 2,
		  "content": "中国是世界人口最多的国家"
		}
	]
}

整个字幕文件就是一个js对象，js对象包含 font_size、font_color、background_alpha、background_color、Stroke、type、lang、version与body属性。除body属性之外，其它的属性都可以省略。**

属性说明如下：

属性名	说明	备注
font_size	字体尺寸，相对尺寸，为比例值，计算方式为将视频尺寸缩放为1024x576，32pixel字体尺寸为1，实际的字体尺寸根据这个值计算出来的，以便于字幕尺寸在视频播放窗口发生变化时同步变化。	非必须
font_color	字体颜色，html字体颜色	非必须
background_alpha	字体背景透明度，1为不透明，0为全透明	非必须
background_color	字体背景颜色	非必须
Stroke	字体是否勾边	非必须
type	字幕类型，实际渲染用不到	非必须
lang	字幕语言，例如zh、zh-TW、en	非必须
version	制作工具版本，实际渲染用不到	非必须
body	字幕的具体内容，必须具备，是一个js数组	必须

实际的字幕内容在body属性里，每个字幕元素都是一个对象，包含from、to与content等属性，字幕元素的属性如下：

属性名	说明	备注
from	字幕的开始时间（相对于媒体时间），单位为秒	必须
to	字幕的结束时间（相对于媒体时间），单位为秒	必须
sid	字幕元素id	可以省略
location	字幕呈现位置	可以省略
content	字幕文本内容	必须

注意：srt与vtt文件是标准的字幕文件格式，zwplayer也全面支持加载这些文件，关于这些字幕文件的格式说明请查找相关技术文档。

用zwplayer支持字幕加载的示例代码如下：

<script language=”javascript”>
window.mainplayer = new ZWPlayer({ //将对象保存到mainplayer用于追加弹幕
url: 'http://192.168.1.100/vod/movie.mp4',
playerElm:'#player-holder', //player 元素ID ,也可以直接的DOM对象
controlbar: true,
autoplay: true
});

//示例代码在时钟事件里延时加载字幕
setTimeout(function() {
if (window.mainplayer) {
    //获取字幕url，实际应用中可能是通过ajax获取得到的
    var subtitleURL_korean = 'http://192.168.1.202:8088/data/movies.korean.srt';
    //设置第一字幕
    window. mainplayer.addSubtitle(subtitleURL_korean, '1');
    //如果提供双字幕请用如下代码，否则删除或注释
    //获取字幕url，实际应用中可能是通过ajax异步获取得到的
    var subtitleURL_japan = 'http://192.168.1.202:8088/data/movies.japan.srt';
    //设置第二字幕
    window. mainplayer.addSubtitle(subtitleURL_japan, '2');
}
}, 1000)
<script>