网页内嵌的视频添加 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字幕文件需要后台提供，格式如下

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

相关阅读

视频嵌入网站的作用有哪些

常言道一图胜千言，而视频比起图片所能承载的信息量更大。如果能够有效的使用视频，它对于用户的吸引力会非常明显——它可以更好的传

产品经理，你要了解一些音视频技术

在当今的移动互联网时代，直播类产品我们再熟悉不过了，比如看游戏直播、给美女主播打赏、听直播课程等。此外，伴随着抖音、快手等短视

微信时刻视频怎么用？怎么删除？

要说过去的2018年最火爆的是什么，那莫过于抖音短视频了，仅仅以十秒左右的视频引的广大用户不停的在上面消磨时间，微信从今年开始也是

前端实现多人视频聊天— WebRTC 实战（多人篇）

转自：https://juejin.im/post/5cbdc145e51d456e541b4cec

解决“夜总会”顽疾 小鱼易连云视频助企业开会效率指

“夜总会”顾名思义就是夜里总是开会现象的简称，这种现象在每家企业都在所难免，上到管理决策层，下到一线执行人员，开会到深