1、从结果来说明：先来看关键性看代码：首先导入videojs库相应的文件；<link rel='stylesheet' type='text/css' href='./video-js.min.css'><link rel='stylesheet' type='text/css' href='./video.min.js'>然后把要播放的视频文件用video标签包含进来。<video id="my_vidoe" class="video-js vjs-default-skin" controls preload="none" width="400" poster="./1.png" data-setup="{}"> <source src="../video/1.mp4" type='video/mp4' /> <track kind="subtitles" src="./1_chn.vtt" srclang="zh-CN" label="简体中文" /></video>效果如下图。
2、videojs库下载：videojs是一个兼容html5的视频播放工具。使用起来非常方便。大家可以通过百度搜索一下就可以下载，并看到它对应的API文档等信息。本文中只介绍了最基本的使用方法，来达到播放带字幕的视频。使用前，先按照步骤1中的那样导入CSS与JS文件。如果有更高级的需求，可以查找它的相关文档。
3、代码功能说明：<video id="my_vidoe" class="video-js vjs-default-skin"controls preload="none" width="400"poster="./1.png"data-setup="{}"> <source src="../video/1.mp4" type='video/mp4' /> <track kind="subtitles" src="./1_chn.vtt" srclang="zh-CN" label="简体中文" /></video>video标签代码：controls：表示显示视频播放控件；preload：是否预加载，为了不造成流量的浪费，这里设置为none；poster：视频未加载时显示的图片。如果不指定，则视频在开始时为一片黑，直到视频开始播放时才有图像显示。source标签代码：src：指明视频所在路径type：指定视频的格式track标签代码：kind：subtitles 字幕 captions 标题，音效及其他音频信息。 descriptions 视频的文本描述。 chapters 章节导航 metadata 元数据src：指定资源URLsrclang：资源的语言label：元素的标签
4、.vtt文件格式说明：vtt文件全称为WebVTT 文件，是一个以 UTF-8 为编码，以.vtt为文件扩展名的简单文本文件。WebVTT的文件头如下示例（以WEBVTT开头）：WEBVTT100:00:00.160 --> 00:00:18.930嘿，这是创建一个业务200:00:18.930 --> 00:00:20.490和你爱的生活。
5、.vtt文件的生成与转换：对于视频文件，可以自己做成。也可以在网络上去找到相关的资源。如果实在找不到.vtt文件的资源，也可以下载srt等格式的字幕文件，然后通过在线工具进行转换即可。
6、作成HTML其它部分：核心的代码有了后，再把HTML的头部与Body加入进来。就可以实现出步骤1中的字幕视频的效果了。如果你还下载了不同语言版本的字幕文件，你还可以做一个下拉框，通过JS来动态的实现多语言字幕的切换功能。
7、视频播放的注意事项：由于视频有可能是容量较大的文件，所以在WEB加载时最好不要自动加载视频文件。因为有些用户可能是通过手机流量来浏览你的网站的。不要给你的用户造成不必要的麻烦。
