视频自定义字幕教程,中英文彩色的都可以
点击上方 前端瓶子君,关注公众号
回复算法,加入前端编程面试算法每日一题群
前言
关于【SSD系列】:
前端一些有意思的内容,旨在3-10分钟里,有所获,又不为所累。
字幕,大家见过吧,其实你也可以,真的可以,真的真的可以。不难,不难,真的不难。我们一起来做点有意思的弹幕吧。
源码:自定义字幕:https://github.com/xiangwenhu/JuejinBlogs/tree/master/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AD%97%E5%B9%95
字幕效果演示
字幕和特殊字符演示
下面的字幕效果,没用使用任何JS代码。
因gif的视频文件太大,拆分为两份。
字幕切换演示
还支持多种字幕,如下演示切换字幕:
原理 WebVTT[3]
MDN的解释
Web视频文本跟踪格式 (WebVTT) 是一种使用``[4]元素显示定时文本轨道(如字幕或标题)的格式。WebVTT文件的主要用途是将文本叠加添加到``[5]。
基本使用:
<video id="videoEL" controls autoplay crossorigin="anonymous" src="./gg.mp4" width="500"><track default src="./zh.vtt" label="中文字幕"><track default src="./en.vtt" label="英文字幕"></video>
复制代码
可以看出来,track
是video的子标签,其src
属性引用了一个vtt
类型的文件,额外注意一下label
属性,这个属性值是切换字幕时的标题。
所以下一章节的vtt
文件是重点。
vtt文件
先看一段范本:
WEBVTT00:00.400 --> 00:00.900 line:38% position:35%
干什么呢00:01.600 --> 00:01.600 line:40% position:35%
就你个小不点复制代码
vtt文件书写有很多规范,我们就抓住三个核心要素 TSP:
时间 T
样式 S
位置 P
连起来:字幕 什么时间,在什么位置,什么身姿 出现。
时间
就是字幕应该什么时候出现, 我觉得你看一下就懂, [开始] --> [结束]
00:00.400 --> 00:00.900 // 400ms-900ms的时候出现
复制代码
时间如下两种格式,至于各个字母的含义,我想作为前端都能理解。
mm:ss.ttt
hh:mm:ss.ttt
样式
就是字幕以什么的身姿出色
样式定义的方式
我们演示效果是有明显的颜色,所以肯定是有地方定义了样式。我们有两种方式定义样式
外挂样式,写在css文件或者style节点里面
下面的代码就是定义默认字幕的样式
video::cue {background-color: transparent;color: yellow;font-size: 20px;text-shadow: peachpuff 0 1px;
}
复制代码
内联样式,就是写在vtt文件里面的样式
下面就是写在vtt文件里面默认字幕样式,注意其STYLE
开头
STYLE
::cue {background-color: transparent;color: yellow;font-size: 20px;text-shadow: peachpuff 0 1px;
}
复制代码
多种字幕样式
上面的样式都只提到了默认样式,演示效果上有两种颜色的字幕,这是怎么做到的,答案很简单,还可以给字幕自定义样式
格式如下:
<c.classname>text</c>
复制代码
我们看一段完整代码,让字幕是白色,并有阴影效果。
vtt文件:
00:00.200 --> 00:00.800 line:58% position:80%
<c.mn>大块头</c.mn>
复制代码
样式文件:c.mn
是关键哦。
video::cue(c.mn) { color: #FFF;text-shadow: peachpuff 0 1px;
}
复制代码
可定义样式的属性
虽说可以自定义样式,主要是字体,背景色,outline, 文本相关的一些属性罢了。更多参见 ::cue[6]
css3的动画,你就别想了。
位置
就是字幕在哪出现
字幕可以水平展示,也可以垂直展示。
line
指定文本垂直显示的位置。如果设置垂直,则行指定文本水平显示的位置。
position
指定文本将水平显示的位置。如果设置为垂直,则位置指定文本将垂直显示的位置。
看一段代码分析:
这条字幕在距顶部38%,左边35% 的位置出现。
00:00.400 --> 00:00.900 line:38% position:35% 干什么呢
复制代码
其他
到此为止,你掌握了三要素,能处理大部分情况了。 还有其他的可选字节顺序标记,注释等等, 重要吗?当然重要,需要的时候才重要。
完整代码
是的,就是这么简单。
最后附上完整的演示视频的代码:
<style>video::cue {background-color: transparent;color: yellow;font-size: 20px;text-shadow: peachpuff 0 1px;}video::cue(c.mn) {color: #FFF;text-shadow: peachpuff 0 1px;}</style><video id="videoEL" controls autoplay crossorigin="anonymous" src="./gg.mp4" width="500"><track default src="./zh.vtt" label="中文字幕"><track default src="./en.vtt" label="英文字幕"></video>
复制代码
WEBVTT00:00.400 --> 00:00.900 line:38% position:35%
干什么呢00:01.600 --> 00:01.600 line:40% position:35%
就你个小不点00:01.600 --> 00:03.000 line:30% position:30%
说啥00:04.000 --> 00:04.800 line:34% position:30%
真嚣张00:05.000 --> 00:06.000 line:34% position:30%
找教训00:00.200 --> 00:00.800 line:58% position:80%
<c.mn>大块头</c.mn>00:01.500 --> 00:02.000 line:58% position:80%
<c.mn>干架</c.mn>00:02.500 --> 00:03.000 line:58% position:80%
<c.mn>来啊</c.mn>00:04.000 --> 00:04.800 line:58% position:80%
<c.mn>来啊</c.mn>00:04.000 --> 00:04.800 line:58% position:80%
<c.mn>来啊</c.mn>00:05.000 --> 00:06.000 line:58% position:35%
????????00:07.201 --> 00:07.400 line:58% position:35%
????00:07.401 --> 00:07.800 line:58% position:35%
????
复制代码
写在最后
写作不易,你的一言一评,就是最大的努力。
WebVTT\_API[7]
HTML5 video视频字幕的使用和制作[8]
关于本文
来源:云的世界
https://juejin.cn/post/6992735843517464612
最后
欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,「在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持
视频自定义字幕教程,中英文彩色的都可以相关推荐
- 【前端】实现视频自定义字幕,中英文,彩色,你也可以
原文: https://juejin.cn/post/6992735843517464612 作者: 云的世界 关注并将「趣谈前端」设为星标 每天定时分享技术干货/优秀开源/技术思维 前言 前端一些有 ...
- 给视频加字幕HTML代码,一键添加字幕的软件推荐,几分钟学会给短视频加字幕,自媒体人都在用...
很多人觉得给短视频加字幕很辛苦? 今天给大家介绍几款给短视频添加字幕用到的软件. 1.字幕通: 字幕通是一款全新模式的智能视频翻译软件,将繁琐的视频字幕翻译制作工作最大程度的便捷化,成功实现从切分时间 ...
- 中英文视频识别字幕并对其添加字幕--自用可白嫖--中/英/中英双语字幕
中英文视频识别字幕并对其添加字幕–自用可白嫖–中/英/中英双语字幕 文章目录 中英文视频识别字幕并对其添加字幕--自用可白嫖--中/英/中英双语字幕 01 平台介绍 1.1 网易见外工作台 1.2 A ...
- 怎样用计算机合并视频,怎么合并视频和字幕 格式工厂视频字幕合并教程-电脑教程...
一般我们看到的视频都是由视频.字幕和声音组成,关于视频和声音的合并技巧,此前华强电子网也有过介绍.而对于视频和字幕合并,此前我们基本没怎么介绍过,那么怎么合并视频和字幕呢?对于一些专业的视频处理人士来 ...
- 微课制作教程08:如何给微课视频添加字幕?
字幕可以让学习者更清晰的了解课程内容,在精品微课中,是必不可少的内容.CourseMaker添加字幕很简单,所见即所得 有两点需要注意: 1.从菜单上方,"编辑"--"字 ...
- 《Adobe Premiere Pro CC经典教程(彩色版)》——2.2 建立项目
本节书摘来自异步社区<Adobe Premiere Pro CC经典教程(彩色版)>一书中的第2课,第2.2节,作者 [英国]Maxim Jago(马克西姆 亚戈),译者 陈昕昕,郭光伟 ...
- 《Adobe Illustrator CC 2014中文版经典教程(彩色版)》目录—导读
版权声明 Adobe Illustrator CC 2014中文版经典教程(彩色版) Adobe® Illustrator® CC Classroom in a Book (2014 release) ...
- [教程]使用Lite MP4 Tool专业制作MP4(AVC)视频格式 - 指导教程
简介: Lite MP4 Tool可以自动生成avs,并编码成MP4AVC格式.对想制作出专业水准的MP4AVC的压制新手来说是一件非常方便的工具.本文指在带大家认识下如何使用Lite MP4 Too ...
- 会声会影—一款视频特效字幕制作的软件
会声会影添加影片字幕及特效字幕的应用,添加影片字幕及特效字幕的会声会影教程合集.字幕是现代影片中的重要组成部分,其用途是向用户传递一些视频画面所无法表达或难以表现的内容,以便观众们能够更好地理解影片的 ...
最新文章
- android ScrollView实现上拉、下拉更新
- 【TensorFlow】——expand_dims、transpose、squeeze
- web服务器文件管理,web文件管理服务器
- 实用教程!使用YOLOv3训练自己数据的目标检测
- js变量后面加问号是什么_JS变量生命周期:为什么 let 没有被提升
- 上新啦 | 火山翻译新增38个语种!
- easyui 扩展loading
- Mongoose学习参考文档
- 正则表达式(Regular Expression)基本概念及理解
- exlc表格怎么换行_在Excel中如何换行?Excel表格换行快捷键是什么?
- Distributing Ballot Boxes HDU - 4190【详细翻译】【贪心、二分】
- golang数据结构_Go数据结构的完整指南
- 6个非常实用的 Python 代码块,适合收藏~
- PS将图片的背景填充变为无色
- 【每日一趣】老王的烦恼
- wps思维导图聚焦模式是灰色不能用的解决方案
- python爬取猫眼电影数据
- PHP能源管理系统ems,EMS能源管理系统
- 智慧社区如何设计 智慧社区解决方案
- 开源在线客服系统源码(PHP开发的网页在线客服聊天系统源码)