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>效果如下图。

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:元素的标签

5、.vtt文件的生成与转换:对于视频文件,可以自己做成。也可以在网络上去找到相关的资源。如果实在找不到.vtt文件的资源,也可以下载srt等格式的字幕文件,然后通过在线工具进行转换即可。

7、视频播放的注意事项:由于视频有可能是容量较大的文件,所以在WEB加载时最好不要自动加载视频文件。因为有些用户可能是通过手机流量来浏览你的网站的。不要给你的用户造成不必要的麻烦。
