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

前言

关于【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,一经查实,立即删除!

相关文章

简述mvvm模式

MVVM模式是一种软件设计模式&#xff0c;它将应用程序的数据模型、用户界面和视图逻辑进行了清晰的分离。在MVVM中&#xff0c;Model代表数据模型&#xff0c;View代表用户界面&#xff0c;而ViewModel则是这两者之间的协调者&#xff0c;负责将Model中的数据转化为View能够理解…

06—面向对象(中)

一、多态 1、多态 概念&#xff1a; 多态是指同一种行为具有不同的表现形式&#xff0c;同一方法根据不同对象具有不同的行为方式。 特点&#xff1a; ①存在同名成员变量时&#xff0c;访问的是父类的成员变量 ②存在同名的非静态成员方法时&#xff0c;访问的是子类重写的…

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

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

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

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

策略模式(Strategy Pattern)在JAVA中的应用

设计模式是软件工程中的一套被广泛认可的解决特定问题的最佳实践。它们是在多年的软件开发实践中总结出的有效方法。策略模式是JAVA中常用的一种行为型设计模式&#xff0c;它定义了一系列算法&#xff0c;并将每一个算法封装起来&#xff0c;使它们可以互换&#xff0c;让算法…

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;那就大错特错了。其实苹果启动磁盘的清理技巧有很…

Nginx基础(06)

Nginx基础&#xff08;05&#xff09; uWSGI 介绍 uWSGI 是一个 Web服务器 主要用途是将Web应用程序部署到生产环境中 可以用来连接Nginx服务与Python动态网站 1. 用 uWSGI 部署 Python 网站项目 配置 Nginx 使其可以将动态访问转交给 uWSGI 安装 python 工具及依赖 安…

Android 日历-周视图

//获取当天 Calendar calendar Calendar.getInstance(); int year calendar.get(Calendar.YEAR); int month calendar.get(Calendar.MONTH) 1; // 注意&#xff1a;月份是从0开始的 int day calendar.get(Calendar.DAY_OF_MONTH); //基姆拉尔森计算公式根据日期判断星期几…

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…

Java 查找算法

顺序查找 顺序查找算法是一种最简单的查找算法&#xff0c;它的基本思想是从数组的第一个元素开始&#xff0c;逐个比较&#xff0c;直到找到目标元素或遍历完整个数组。 以下是Java实现的顺序查找算法示例代码&#xff1a; public class SequentialSearch {public static i…

设计模式|访问者模式(Visitor Pattern)

文章目录 结构举例优缺点优点缺点代码示例常见面试题访问者模式是一种行为设计模式,它允许在不改变已有类的情况下定义一组新的操作。 这些操作通常分散在不同的类中,但是希望能够对这些类的对象进行统一的处理。 访问者模式的核心思想是将操作从对象结构中分离出来,使得可以…

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

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

ChatGPT:提升写作效率的必备工具

ChatGPT无限次数:点击直达 html ChatGPT&#xff1a;提升写作效率的必备工具 作为一名有着10年经验的CSDN网站原创文章优质创作者&#xff0c;写作效率对我来说至关重要。在这篇文章中&#xff0c;我将分享如何利用ChatGPT这一强大工具提升写作效率&#xff0c;以及具体的实…

Nacos源码分析,Nacos如何注册一个服务实例?

作为SpringCloudAlibaba微服务架构实战派上下册和RocketMQ消息中间件实战派上下册的作者&#xff0c;我来给大家带来Nacos源码系列的技术文章。 HTTP方式注册服务实例 Naocs使用InstanceController类的HTTP方法register()提供注册服务实例的功能。 /*** 注册服务实例到注册中…

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

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