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

前言

关于【SSD系列】:
前端一些有意思的内容,旨在3-10分钟里,有所获,又不为所累。

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

源码: 自定义字幕

字幕效果演示

字幕和特殊字符演示

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

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

zimy2.gif

字幕切换演示

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

zimy3.gif

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

先看一段范本:

WEBVTT00: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>
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%
💔

写在最后

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/821028.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何评估一个RAG(检索增强生成)系统

本文首发自博客文章 如何评估一个RAG&#xff08;检索增强生成&#xff09;系统 RAG 概念最初来源于 2020 年 Facebook 的一篇论文&#xff0c;这是 Facebook 博客对论文内容的进一步解释 &#x1f449;《检索增强生成&#xff1a;简化智能自然语言处理模型的创建》。大家都知…

【C++对于C语言的扩充】函数重载、引用以及内联函数

文章目录 &#x1f680;前言&#x1f680;函数重载注意&#xff1a;✈️为什么C可以实现函数重载&#xff0c;而C语言却不行呢&#xff1f; &#x1f680;引用✈️引用的特性✈️C中为什么要引入引用✈️引用与指针的区别 &#x1f680;内联函数✈️内联函数特性 &#x1f680;…

GitHub提交PR

本教程只做开源代码库Github工程提交pr的教程&#xff0c;不做其他的深入的讲解 Github和Gitlab的操作类似&#xff0c;只不过Github叫PR&#xff0c;GitLab叫MR&#xff0c;基本上做法是一致的 以开源项目QuickChat为例 https://github.com/Binx98/QuickChat https://github…

C++项目 -- 负载均衡OJ(一)comm

C项目 – 负载均衡OJ&#xff08;一&#xff09;comm 文章目录 C项目 -- 负载均衡OJ&#xff08;一&#xff09;comm一、项目宏观结构1.项目功能2.项目结构 二、comm公共模块1.util.hpp2.log.hpp 一、项目宏观结构 1.项目功能 本项目的功能为一个在线的OJ&#xff0c;实现类似…

研发岗-统信UOS系统配置npm git等前端常用配置

第一步 获取root权限 配置环境等都需要用到root权限&#xff0c;所以我们先获取到root权限&#xff0c;方便下面的操作 下载软件 在UOS应用商店下载的所需应用 版本都比较低 安装node 官网下载了【arm64】的包&#xff0c;解压到指定文件夹&#xff0c;设置链接&#xff0…

苹果电脑启动磁盘是什么意思 苹果电脑磁盘清理软件 mac找不到启动磁盘 启动磁盘没有足够的空间来进行分区

当你一早打开苹果电脑&#xff0c;结果系统突然提示&#xff1a; “启动磁盘已满&#xff0c;需要删除部分文件”。你会怎么办&#xff1f;如果你认为单纯靠清理废纸篓或者删除大型文件就能释放你的启动磁盘上的空间&#xff0c;那就大错特错了。其实苹果启动磁盘的清理技巧有很…

STM32之HAL开发——CubeMX配置串行Flash文件系统

配置流程 在开始配置FATFS前&#xff0c;需要提前配置好RCC的时钟&#xff0c;以及时钟的频率&#xff0c;另外还要配置好Debug选项&#xff08;选择串行&#xff09; 选项介绍 文件系统适用于SD卡&#xff0c;Disk磁盘等&#xff0c;需要我们将对应的驱动打开才可以使用。 …

【vue】Pinia-2 安装Pinia,使用store

1. 安装Pinia 在项目路径下执行npm install pinia 在package.json中查看 2. 使用store 在main.js中添加 import { createPinia } from pinia const pinia createPinia()修改createApp方法 最后示例如下&#xff08;三处修改&#xff09; import { createApp } from vue //…

SimpleImputer缺失数据处理报错解决方案

作者Toby&#xff0c;来源公众号&#xff1a;Python风控建模&#xff0c;SimpleImputer缺失数据处理报错解决方案 今天有学员反馈缺失值代码报错&#xff0c;由于sklearn缺失值处理的包升级&#xff0c;下面把官网最新的缺失值处理代码奉上。 参考https://scikit-learn.org/st…

请把「睡一个好觉」,当成一天里最重要的事来管理

我发现许多人都有这么一种情况&#xff1a;明明知道睡眠很重要&#xff0c;但却总是有意无意地熬夜。 比如&#xff1a; 给自己排了太多的学习和工作量&#xff0c;一不小心就到了凌晨一两点&#xff1b; 总觉得过去的一天什么都没干&#xff0c;宁愿在网上闲逛&#xff0c;也不…

低代码开发平台权威推荐:创新开发、领跑市场!

Gartner是低代码领域的一家权威机构&#xff0c;该机构常常通过"魔力象限"的研究方法&#xff0c;评选全球范围内IT细分领域的产品&#xff0c;来帮助决策者提供重要的咨询建议。本文盘点了Gartner机构推荐的6款低代码平台&#xff1a;Zoho Creator、Mendix、Oracle、…

JVM结构化体系

目录 目录 1.JVM 简介 1.1. 如何理解 JVM 呢&#xff1f; 1.2. 市场主流 JVM 分析&#xff1f; 1.3. 为什么要学习 JVM&#xff1f; 1.4. 字节码底层是如何执行呢&#xff1f; 如何理解 JIT 呢&#xff1f; 为什么 JVM 中解释执行与编译执行的并存&#xff08;混合模式&…

【C++】类和对象③(类的默认成员函数:拷贝构造函数 | 赋值运算符重载)

&#x1f525;个人主页&#xff1a;Forcible Bug Maker &#x1f525;专栏&#xff1a;C 目录 前言 拷贝构造函数 概念 拷贝构造函数的特性及用法 赋值运算符重载 运算符重载 赋值运算符重载 结语 前言 本篇主要内容&#xff1a;类的6个默认成员函数中的拷贝构造函数…

el-drawer二次封装进行可拖拽

1.想要的效果 鼠标放到上面出现箭头显示可拖拽得图标 2.代码实现 2.1封装成自定义指令 // drawerDragDirective.js // 定义指令 const drawerDragDirective {// 指令绑定时的处理函数bind(el, ) {const minWidth 300;const dragDom el.querySelector(.el-drawer);// 创…

掀起区块链开发狂潮!Scaffold-eth带你一键打造震撼DApp

文章目录 前言一、Scaffold-eth是什么&#xff1f;二、安装和配置1.准备工作2.安装3.配置开发环境 三、进阶使用1.放入自己的合约2.部署运行 总结 前言 前面的文章传送&#x1f6aa;&#xff1a;hardhat入门 与 hardhat进阶 在之前的文章中&#xff0c;我们已经探讨了使用Har…

设计模式系列:简单工厂模式

作者持续关注 WPS二次开发专题系列&#xff0c;持续为大家带来更多有价值的WPS二次开发技术细节&#xff0c;如果能够帮助到您&#xff0c;请帮忙来个一键三连&#xff0c;更多问题请联系我&#xff08;QQ:250325397&#xff09; 目录 定义 特点 使用场景 优缺点 (1) 优点…

故障转移-redis

4.4.故障转移 集群初识状态是这样的&#xff1a; 其中7001、7002、7003都是master&#xff0c;我们计划让7002宕机。 4.4.1.自动故障转移 当集群中有一个master宕机会发生什么呢&#xff1f; 直接停止一个redis实例&#xff0c;例如7002&#xff1a; redis-cli -p 7002 sh…

保持微软Microsoft Teams始终在线的方案

保持微软Microsoft Teams始终在线的方案 背景方案 背景 目前使用微软Teams办公的小伙伴很多&#xff0c;但是长时间不操作电脑就被自动设置成离线状态。对于在电脑前学习书本或者在思考问题的小伙伴就显得不太友好&#xff0c;因为即使我们不操作电脑我们也时刻在电脑前&#…

定时器产生延时停止

1&#xff0c;需求&#xff1a; 当按下按钮SB1,输出信号为0N,指示灯点亮;按下按钮SB2,经过10s的延时后,指示灯熄灭 2&#xff0c;关闭使用定时的常闭触电

HG泄露(ctfhub)

工具准备&#xff1a;dirsearch、dvcs-ripper 网络安全之渗透测试全套工具篇&#xff08;内含安装以及使用方法&#xff09;_dvcs-ripper-CSDN博客 dvcs-ripper&#xff1a;一款perl的版本控制软件信息泄露利用工具&#xff0c;支持bzr、cvs、git、hg、svn... tree //树状…