在 Blackboard 平台上播放带字幕文件的 Html5视频

Blackboard 平台自带的 Html5视频 播放插件只能播放视频文件。
还好它的编辑窗口允许自己写部分的html标签语句，于是我自己写了播放代码。

注1：因为chrome不支持srt格式的字幕文件，所以可以把srt格式的文件转换为vtt文件。
srt 在线转 vtt 工具：https://atelier.u-sub.net/srt2vtt/
注2：因为 Blackboard 平台的编码码为utf-8，所以请在保存vtt文件的时候指定编码为utf-8。

<p style="text-align: center;">
<video id="video" width="640" height="360" controls="controls" autoplay="autoplay" controlslist="nodownload">
<source src="MP4视频文件地址" type="video/mp4" />  
<track kind="subtitles" label="中文字幕" srclang="zh" src="VTT字幕文件地址" default />
</video>
</p>

结果可以正常播放带字幕的视频。不过这个黑底的字幕有些难看。而 Blackboard 平台又不允许直接嵌入CSS。所以我又写了个CSS文件上传到平台上：

video::cue{
    background-color:transparent;
    color:white;
    font-size:20px;
    line-height: 50px;
    text-shadow: 0px 3px 2px #000, -1px 0px 5px #000, 0px -2px 2px #000, 3px 0px 3px #000;
    word-wrap: break-word;
}

在播放代码里加上引用CSS文件：

<p style="text-align: center;">
<link rel="stylesheet" type="text/css" href="CSS文件的地址" /> 
<video id="video" width="640" height="360" controls="controls" autoplay="autoplay" controlslist="nodownload">
<source src="MP4视频文件地址" type="video/mp4" />  
<track kind="subtitles" label="中文字幕" srclang="zh" src="VTT字幕文件地址" default />
</video>
</p>