网页内嵌的视频添加 vtt 外挂字幕

效果：

代码

track标签加个字幕文件的链接就行了。

 <video class="video" id="video" preload="none" webkit-playsinline="true" src="@(ViewBag.VideoUrl)" poster="@(ViewBag.OriginImage)" playsinline="playsinline" controls="controls">
  <track src="@ViewBag.SubtitleUrl" srclang="zh"  kind="subtitles" default>
video>

样式

::cue {
    background: none;
    color: #fff;
    text-shadow: 3px 3px 5px #000000;
    font-size: 12px;
}

notice

因为是在项目中，视频的字幕是根据视频的不同而动态变化的，所以vtt字幕文件需要后台提供，格式如下

如果网页不显示字幕，查看一下，请求头部