【SSD系列】视频自定义字幕,中英文,彩色的,你也可以,不会不知道吧

简介: 关于【SSD系列】:前端一些有意思的内容,旨在3-10分钟里,有所获,又不为所累。字幕,大家见过吧,其实你也可以,真的可以,真的真的可以。不难,不难,真的不难。 我们一起来做点有意思的弹幕吧。

4.JPG


前言


关于【SSD系列】:


前端一些有意思的内容,旨在3-10分钟里,有所获,又不为所累。

字幕,大家见过吧,其实你也可以,真的可以,真的真的可以。不难,不难,真的不难。 我们一起来做点有意思的弹幕吧。


源码: 自定义字幕


字幕效果演示


字幕和特殊字符演示


下面的字幕效果,没用使用任何JS代码。

因gif的视频文件太大,拆分为两份。

1.JPG

2.JPG


字幕切换演示


还支持多种字幕,如下演示切换字幕:


3.JPG


原理 WebVTT


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文件



先看一段范本:


WEBVTT
00:00.400 --> 00:00.900 line:38% position:35%
干什么呢
00:01.600 --> 00:01.600 line:40% position:35%
就你个小不点
复制代码


vtt文件书写有很多规范,我们就抓住三个核心要素TSP:


  1. 时间 T
  2. 样式 S
  3. 位置 P


连起来: 字幕 什么时间,在什么位置,什么身姿 出现。


时间


就是字幕应该什么时候出现, 我觉得你看一下就懂, [开始] --> [结束]


00:00.400 --> 00:00.900   // 400ms-900ms的时候出现
复制代码


时间如下两种格式,至于各个字母的含义,我想作为前端都能理解。


  • mm:ss.ttt
  • hh:mm:ss.ttt


样式


就是字幕以什么的身姿出色


样式定义的方式


我们演示效果是有明显的颜色,所以肯定是有地方定义了样式。我们有两种方式定义样式


  1. 外挂样式,写在css文件或者style节点里面


下面的代码就是定义默认字幕的样式


video::cue {
    background-color: transparent;
    color: yellow;
    font-size: 20px;
    text-shadow: peachpuff 0 1px;
}
复制代码


  1. 内联样式,就是写在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


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>
复制代码
WEBVTT
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%
💔
复制代码


写在最后


写作不易,你的一言一评,就是最大的努力。

相关文章
|
3月前
|
编解码 文字识别 算法
视觉智能开放平台产品使用合集之通用高清分割是否支持裁剪空白区域
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
|
2月前
|
编解码 iOS开发
视频转换XMedia Recode v3.6.0.1
XMedia Recode是一款免费的视频格式转换软件,支持几乎所有视频格式的转换,基本的有DVD, AVI, MP4, 3GP, WMV, ASF等格式。对于一些特殊格式的视频,不用担心看不到,有了XMedia Recode除了保证转换质量,还能转换为你想要的类型。
10 0
|
4月前
|
PHP 数据安全/隐私保护 计算机视觉
ThinkPHP图片处理之压缩图片大小,图片处理之图片水印(添加平铺文字水印,并设置文字之间的间距和文字的角度)
ThinkPHP图片处理之压缩图片大小,图片处理之图片水印(添加平铺文字水印,并设置文字之间的间距和文字的角度)
78 1
|
4月前
|
文字识别
印刷文字识别使用问题之是否支持指定颜色筛选文字
印刷文字识别产品,通常称为OCR(Optical Character Recognition)技术,是一种将图像中的印刷或手写文字转换为机器编码文本的过程。这项技术广泛应用于多个行业和场景中,显著提升文档处理、信息提取和数据录入的效率。以下是印刷文字识别产品的一些典型使用合集。
|
4月前
|
文字识别
【提取翻译竖排文字日文图片的软件】竖排的日语图片文字识别翻译,竖排的日语图片文字如何识别,竖排日语图片识别后转横排,竖排的日语识别比较友好的方法
这款软件专攻竖排日语图片文字识别,支持自动横排转换,能准确提取左右排版文字,并翻译成中文。用户可从百度网盘或腾讯云盘下载。功能包括图片打开、拖拽识别、截屏拾取、顺序识别、文字导出、快捷搜索及窗体操作。识别时注意保持文字等高以减少误差。附带视频教程(BV1vW4y1p7st)帮助快速上手。
266 0
|
机器人 语音技术
神器 | 文本转语音,直接可以合成多人多风格音频了!
为了适应更多的音频使用场景和需求,近期我们将文本转语音服务进行了升级,全新的功能将成为你配音工具的不二之选。
429 1
|
自然语言处理 Java API
音频的文本切换
音频的文本切换
80 0
|
Web App开发 文字识别 JavaScript
强大的实况文本功能,直接复制图片上的文字(macOS)
用OCR软件,是很多人的选择。我曾经也给大家推荐过“天若OCR”软件,还有朋友在用吗?
372 0
QGS
|
监控
解决Zabbix5.0.8图形无法显示(中英文)图片文字标签
记解决Zabbix5.0.8图形无法显示(中英文)图片文字标签
QGS
466 0
解决Zabbix5.0.8图形无法显示(中英文)图片文字标签
|
Python
如何通过分割模型完成证件照制作
语义分割或者抠图完之后,我们会获取一个带有alpha通道的png图像。可以通过该图像进一步加工,更换前景的背景图片,从而实现证件照制作、换背景、换天等的玩法。本文主要介绍如何对alpha通道进行原图加工,从而实现证件照功能。