【前端】实现视频自定义字幕,中英文,彩色,你也可以
原文: https://juejin.cn/post/6992735843517464612
作者: 云的世界
关注并将「趣谈前端」设为星标
每天定时分享技术干货/优秀开源/技术思维
前言
前端一些有意思的内容,旨在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[1]
MDN的解释
Web视频文本跟踪格式 (WebVTT) 是一种使用track元素显示定时文本轨道(如字幕或标题)的格式。WebVTT文件的主要用途是将文本叠加添加到video。
基本使用:
<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[4]
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>
.vtt文件内容
00: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% ????
好了,今天的分享就到这里了,如果文章对你有帮助,你也可以点赞 + 转发, 鼓励作者持续创作。
从零搭建全栈可视化大屏制作平台V6.Dooring
从零设计可视化大屏搭建引擎
Dooring可视化搭建平台数据源设计剖析
可视化搭建的一些思考和实践
基于Koa + React + TS从零开发全栈文档编辑器(进阶实战
点个在看你最好看
【前端】实现视频自定义字幕,中英文,彩色,你也可以相关推荐
- 视频自定义字幕教程,中英文彩色的都可以
点击上方 前端瓶子君,关注公众号 回复算法,加入前端编程面试算法每日一题群 前言 关于[SSD系列]: 前端一些有意思的内容,旨在3-10分钟里,有所获,又不为所累. 字幕,大家见过吧,其实你也可以, ...
- 中英文视频识别字幕并对其添加字幕--自用可白嫖--中/英/中英双语字幕
中英文视频识别字幕并对其添加字幕–自用可白嫖–中/英/中英双语字幕 文章目录 中英文视频识别字幕并对其添加字幕--自用可白嫖--中/英/中英双语字幕 01 平台介绍 1.1 网易见外工作台 1.2 A ...
- 英文视频自动生成中英文字幕+pr导入并添加字幕
自动生成中英文字幕 呐,这里要给大家推荐一个特别强大的工具,那就是网易见外,这是一个AI智能语音转写听翻平台. 我这里主要用到了视频智能字幕功能.整体感觉在国内应该算比较挺强大的,可能也是因为没有用过 ...
- 如何把视频文件添加中英文对照字幕
如何把视频文件添加中英文对照字幕 在这里用到了subtitle edit的软件,首先我们先安装好subtitle和vlc软件,见上一篇文章下载Subtitle edit和vlc 1,点击视频,打开视频 ...
- Windows下使用ffmpeg为视频添加字幕
字幕分以下几种形式: 第一种是外挂字幕(软字幕),视频文件和字幕文件分离.当播放某视频文件时,会自动载入相同文件夹下同名的字幕文件,当然也可以用播放器(如:VLC media player)手动载入字 ...
- 用matlab实现视频截图字幕部分的拼接
这里提供一个在线截图拼接工具:截图拼接工具 - 在线拼接电影字幕截图 我们常在微博及各大论坛.贴吧看到各种视频截图字幕部分的拼接,这广泛应用于一个角色在剧中说的一段特别精彩的话,这对应于 Gif ⇒ ...
- html+视频添加字幕,给视频加滚动字幕,给视频加字幕制作mv 录制的视频配背景音乐...
给视频添加滚动字幕方法其实很简单,像我们下载的电影,歌曲,用手机录制的视频都可以加字幕,或者滚动字幕,也可以加背景音乐或其它声音,给视频开头或结尾加一张图片或多张图片等等都是可以实现的,而这一切都是那 ...
- 如何在迪士尼+上启用和自定义字幕
Like Netflix and other streaming platforms, Disney+ caters to multilingual and hard-of-hearing custo ...
- html的视频字幕制作步骤,视频滚动字幕怎么制作(上)
滚动字幕在我们生活中是十分常见的,不管是电影还是电视中都经常出现滚动字幕,内容包括广告.通知.说明等等,为视频添加滚动字幕可以让视频更加丰富.会声会影x8提供了很简便的方法来为视频添加滚动字幕,我们一 ...
最新文章
- iOS开发UI 篇—CAlayer层的属性
- 云计算,大数据,5G和人工智能
- Java入门算法(排序篇)丨蓄力计划
- 【釜底抽薪】谷歌锁喉华为
- netty 入门(一)
- linux mongo 搭建+集群
- 简单企业网络搭建(基于华为eNSP模拟器)
- [bzoj4556][TJOIHEOI2016]字符串
- 设计模式——仲裁模式
- 波士顿学院的计算机科学,权威公布:美国最强商学院,TOP5里有你的梦校吗?...
- 2020-10-06
- 商业银行相关不良资产监管指标大全
- clickhouse PARTITION操作
- word表格合并单元格后,光标居中
- 6.10 通过屏幕截图功能快速插入网页图片 [原创Excel教程]
- 【ArcGIS】server授权文件ecp超期的处理
- SMS短信中英文混合编码
- JavaScript学习手册(12)
- 计算机网络专业土味情话,各个大学专业的“土味情话”,撩不到你算我输!
- 傲游3用户数据本地备份工具
热门文章
- QtWebassembly遇到的一些报错问题及解决方案
- Python日志工具 Python plog
- 《Ce train qui s’en va 离站的火车》
- android 解决viewpager+多个fragment+recyclerview,viewpager展示内容高度不自适应出现多余空白问题
- 风光电互补MATLAB仿真模型
- CFS----------------完全公平调度算法
- iOS最新型号设备信息对照表
- 【如何和陌生人攀上关系?】
- MYSQL-DECLARE CONTINUE HANDLER FOR NOT FOUND SET FOUND=FALSE
- 阿里后台四年,想要跳槽字节,艰难4面,已成功收到开发岗offer