网页内嵌的视频添加 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字幕文件需要后台提供,格式如下
这里写图片描述
如果网页不显示字幕,查看一下,请求头部
这里写图片描述

猜你喜欢

转载自blog.csdn.net/wcy7916/article/details/80881667