＜track＞标签在＜video＞或＜audio＞元素中的作用，如何利用它实现字幕功能？

大白话标签在或元素中的作用，如何利用它实现字幕功能？

在网页里播放视频或者音频时，有时候我们会希望能有字幕显示出来，这样可以让大家更好地理解内容。这时候<track>标签就派上用场啦！下面我就用大白话给你讲讲<track>标签在<video>或<audio>元素里的作用，还有怎么用它来实现字幕功能。

<track>标签的作用

<track>标签就像是一个小助手，它可以和<video>或者<audio>元素配合使用。这个小助手能帮你加载字幕、描述信息、章节信息这些东西。简单来说，它能让视频或者音频变得更丰富，就像给它们配上了说明书一样。

如何利用<track>实现字幕功能

要实现字幕功能，一般需要这么几个步骤：

  1. 准备字幕文件：字幕文件通常是用 WebVTT 格式（.vtt）来写的。这种格式很简单，就是记录了字幕显示的时间和内容。
  2. 在 HTML 里添加<video>或者<audio>元素：这就是播放视频或者音频的地方。
  3. 在<video>或者<audio>元素里添加<track>标签：让<track>标签去找到你准备好的字幕文件。

下面是一段代码示例，我在每句代码上都加了注释，这样你就能看得更明白啦：

<!DOCTYPE html>
<html lang="zh"><head><!-- 设置文档的字符编码为 UTF-8 --><meta charset="UTF-8"><!-- 设置页面在移动设备上的显示效果 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 给页面加个标题 --><title>视频字幕示例</title>
</head><body><!-- 创建一个视频播放器 --><video controls width="640" height="360"><!-- 视频文件的来源，这里是一个示例视频 --><source src="example_video.mp4" type="video/mp4"><!-- 浏览器不支持 video 标签时显示的提示信息 -->你的浏览器不支持视频播放。<!-- 添加 track 标签来加载字幕文件 --><track kind="subtitles"  <!-- 指定 track 的类型为字幕 -->src="subtitles.vtt"  <!-- 字幕文件的路径 -->srclang="zh"  <!-- 字幕的语言为中文 -->label="中文"  <!-- 字幕的标签，方便用户选择 -->default  <!-- 设置这个字幕为默认显示的字幕 -->></video>
</body></html>

代码解释

  1. <video>元素：这是用来播放视频的，controls属性让视频播放器显示播放控制条，width和height属性设置了视频播放器的大小。
  2. <source>元素：指定了视频文件的来源，type属性告诉浏览器这个视频文件的类型是 MP4。
  3. <track>元素：
    • kind="subtitles"：说明这个<track>加载的是字幕。
    • src="subtitles.vtt"：指定了字幕文件的路径。
    • srclang="zh"：表示字幕的语言是中文。
    • label="中文"：给字幕加了个标签，这样用户就能在播放器里选择这个字幕啦。
    • default：设置这个字幕为默认显示的字幕。

字幕文件示例（subtitles.vtt）

WEBVTT
// 这里是文件的开头，必须写上 WEBVTT00:00:00.000 --> 00:00:05.000
// 这段字幕显示的时间范围，从 0 分 0 秒 0 毫秒到 0 分 0 秒 5 毫秒
欢迎观看这个视频00:00:05.000 --> 00:00:10.000
// 这段字幕显示的时间范围，从 0 分 0 秒 5 毫秒到 0 分 0 秒 10 毫秒
这里会有很多有趣的内容

通过上面这些步骤，你就能在视频或者音频里实现字幕功能啦，是不是很简单呀！

如何确保字幕文件与视频或音频正确匹配？
为确保字幕文件与视频或音频正确匹配，可从以下几个方面着手：

1. 时间轴精确匹配

  • 准确设置字幕时间：在字幕文件（如 WebVTT 格式）中，每个字幕片段都有开始和结束时间，要保证这些时间与视频或音频中对应的内容精准对应。例如，在视频中人物开始说话时，字幕的开始时间应与之同步；人物说完话，字幕的结束时间也应准确结束显示。
  • 使用专业工具：借助视频编辑软件或字幕编辑工具，这些工具能提供可视化的时间轴，让你更方便地调整字幕的时间。像 Aegisub 就是一款功能强大的字幕编辑软件，它可以精确到毫秒级地调整字幕时间。

2. 格式兼容性

  • 选择合适的字幕格式：常见的字幕格式有 WebVTT（.vtt）、SRT（.srt）等。对于网页中的视频或音频，推荐使用 WebVTT 格式，因为它是 HTML5 标准支持的格式，兼容性好。
  • 验证字幕文件格式：确保字幕文件的格式正确无误，避免出现语法错误。可以使用在线的字幕验证工具，如 Subtitle Edit 的在线验证功能，检查字幕文件是否存在格式问题。

3. 语言和编码匹配

  • 语言一致：字幕文件的语言要与视频或音频中的语言一致。如果视频是中文，字幕也应该是中文；如果视频包含多种语言，可能需要准备多个不同语言的字幕文件。
  • 编码统一：字幕文件的编码格式要与网页的编码格式一致，通常使用 UTF - 8 编码。在保存字幕文件时，选择正确的编码格式，避免出现乱码问题。

4. 代码中正确引用

  • 路径正确：在 HTML 代码中使用<track>标签引用字幕文件时，要确保src属性指定的路径是正确的。如果字幕文件和 HTML 文件在同一目录下，直接写文件名即可；如果不在同一目录，要写相对路径或绝对路径。
  • 属性设置正确：除了src属性，还要正确设置kind、srclang、label等属性。例如，kind属性要根据实际情况设置为subtitles（字幕）、captions（标题）等；srclang属性要设置为字幕的语言代码。

以下是一个示例代码，展示了如何在 HTML 中正确引用字幕文件：

<!DOCTYPE html>
<html lang="zh"><head><!-- 设置字符编码为 UTF-8 --><meta charset="UTF-8"><!-- 设置页面在移动设备上的显示效果 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 页面标题 --><title>视频字幕示例</title>
</head><body><!-- 创建视频播放器 --><video controls width="640" height="360"><!-- 视频文件来源 --><source src="example_video.mp4" type="video/mp4"><!-- 浏览器不支持 video 标签时的提示信息 -->你的浏览器不支持视频播放。<!-- 添加 track 标签引用字幕文件 --><track kind="subtitles"  <!-- 指定为字幕类型 -->src="subtitles.vtt"  <!-- 字幕文件路径 -->srclang="zh"  <!-- 字幕语言为中文 -->label="中文"  <!-- 字幕标签 -->default  <!-- 设置为默认显示的字幕 -->></video>
</body></html>

5. 测试与调试

  • 播放测试：在不同的浏览器和设备上播放视频或音频，检查字幕是否能正确显示，时间是否匹配。如果发现问题，及时调整字幕文件的时间或格式。
  • 调试工具：使用浏览器的开发者工具，检查是否有加载字幕文件的错误信息。例如，在 Chrome 浏览器中，按 F12 打开开发者工具，切换到“Network”面板，查看字幕文件是否成功加载。

通过以上这些方法，就能确保字幕文件与视频或音频正确匹配，为用户提供更好的观看或收听体验。

如何确保字幕文件与视频或音频正确匹配？

WebVTT（Web Video Text Tracks）是一种用于在网页视频或音频中添加字幕、标题、描述等文本信息的格式。它语法简单，易于编写和理解，以下是其详细的语法规则：

1. 文件头部

每个 WebVTT 文件都必须以 WEBVTT 开头，并且后面要紧跟一个换行符。这是用来标识该文件是 WebVTT 格式的。

WEBVTT

2. 注释

在 WebVTT 文件中，可以使用注释来添加一些说明信息。注释以 NOTE 开头，后面跟上注释内容，注释可以跨多行。

NOTE 这是一个注释，用于说明这个字幕文件的相关信息。

3. 字幕条目

字幕条目是 WebVTT 文件的核心部分，每个字幕条目包含时间范围和对应的文本内容，一个文件中可以有多个字幕条目，它们之间用空行分隔。

3.1 时间范围

时间范围指定了字幕显示的开始时间和结束时间，格式为 HH:MM:SS.mmm --> HH:MM:SS.mmm，其中 HH 表示小时，MM 表示分钟，SS 表示秒，mmm 表示毫秒。时间范围后面可以跟一些可选的设置，如对齐方式、定位等。

00:00:00.000 --> 00:00:05.000
3.2 文本内容

时间范围后面紧跟字幕的文本内容，文本可以是多行的。

00:00:00.000 --> 00:00:05.000
欢迎观看这个视频

4. 样式和定位

可以在时间范围后面添加一些可选的设置来控制字幕的样式和定位。

4.1 对齐方式

对齐方式可以是 start（左对齐）、middle（居中对齐）、end（右对齐）等。

00:00:00.000 --> 00:00:05.000 align:middle
欢迎观看这个视频
4.2 定位

可以使用 line 和 position 属性来指定字幕的位置。line 表示字幕在垂直方向上的位置，position 表示字幕在水平方向上的位置。

00:00:00.000 --> 00:00:05.000 line:10% position:50%
欢迎观看这个视频

5. 样式标签

在字幕文本中，可以使用一些 HTML 标签来设置文本的样式，如 <b>（加粗）、<i>（斜体）、<u>（下划线）等。

00:00:00.000 --> 00:00:05.000
<b>欢迎</b>观看这个<i>视频</i>

6. 示例完整文件

WEBVTT
NOTE 这是一个 WebVTT 字幕文件的示例00:00:00.000 --> 00:00:05.000 align:middle
<b>欢迎</b>观看这个视频00:00:05.000 --> 00:00:10.000 line:10% position:50%
这里会有很多<i>有趣</i>的内容

注意事项

  • 时间顺序：字幕条目的时间范围应该按照先后顺序排列，否则可能会导致字幕显示混乱。
  • 空行分隔：每个字幕条目之间必须用空行分隔，否则会被视为同一个字幕条目。
  • 语法错误：确保时间范围、文本内容等符合 WebVTT 的语法规则，否则可能会导致字幕无法正常显示。

通过遵循这些语法规则，你可以创建出功能丰富、显示准确的 WebVTT 字幕文件。

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

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

相关文章

【洛谷题单】暴力枚举（上）

【洛谷题单】暴力枚举（上）

【前情提要】 此文章包含洛谷题单的枚举题单&#xff0c;共14题&#xff0c;本篇7道题&#xff0c;主要分析思路&#xff0c;并通过这几道题目&#xff0c;进行总结有关枚举的内容。所以内容比较多&#xff0c;可以先收藏起来&#xff0c;慢慢看。 题单链接&#xff1a;暴力枚…
阅读更多...
JVM类加载过程详解

JVM类加载过程详解

文章目录 前言1.加载2.链接验证文件格式验证元数据验证字节码验证符号引用验证 准备解析 3.初始化4.类卸载 前言 类从被加载到虚拟机内存中开始到卸载出内存为止&#xff0c;它的整个生命周期可以简单概括为 7 个阶段&#xff1a;加载&#xff08;Loading&#xff09;、验证&a…
阅读更多...
python之并发编程

python之并发编程

并发编程介绍 串行、并行与并发的区别 进程、线程、协程的区别 1. 进程 (Process) 定义&#xff1a;进程是操作系统为运行中的程序分配的基本单位。每个进程都有独立的地址空间和资源&#xff08;如内存、文件句柄等&#xff09;。特点&#xff1a; 进程是资源分配的基本单位…
阅读更多...
批量优化与压缩 PPT，减少 PPT 文件的大小

批量优化与压缩 PPT，减少 PPT 文件的大小

我们经常能够看到有些 PPT 文档明明没有多少内容&#xff0c;但是却占用了很大的空间&#xff0c;存储和传输非常的不方便&#xff0c;这时候通常是因为我们插入了一些图片/字体等资源文件&#xff0c;这些都可能会导致我们的 PPT 文档变得非常的庞大&#xff0c;今天就给大家介…
阅读更多...
centos 7 LVM管理命令

centos 7 LVM管理命令

物理卷&#xff08;PV&#xff09;管理命令 pvcreate&#xff1a;用于将物理磁盘分区或整个磁盘创建为物理卷。 示例&#xff1a;sudo pvcreate /dev/sdb1 解释&#xff1a;将 /dev/sdb1 分区创建为物理卷。 pvdisplay&#xff1a;显示物理卷的详细信息&#xff0c;如大小、所属…
阅读更多...
b站视频提取mp4方案

b站视频提取mp4方案

引言 对于b站视频&#xff0c;有些视频是不能提取字幕的&#xff0c;所以我们想把对应的视频下载下来&#xff0c;然后进行对应的本地处理&#xff0c;获得所需的自由处理&#xff0c;吞食视频。 整体思路 下载b站客户端 ----> 把缓存路径修改------> 下载所需视频---…
阅读更多...
springboot在feign和线程池中使用TraceId日志链路追踪(最终版)-2

springboot在feign和线程池中使用TraceId日志链路追踪(最终版)-2

文章目录 简述问题feign调用时给head加入traceIdFeignConfig配置FeignConfig 局部生效feign拦截器和配置合并为一个文件&#xff08;最终版&#xff09;feign异步调用拦截器配置[不常用] 使用TTL自定义线程池为什么需要TransmittableThreadLocal&#xff1f; 总结参考和拓展阅读…
阅读更多...
MySQL数据库单表与多表查询

MySQL数据库单表与多表查询

一.单表查询 1.创建用于数据查询的数据库表 CREATE TABLE worker (部门号 int(11) NOT NULL,职工号 int(11) NOT NULL,工作时间 date NOT NULL,工资 float(8,2) NOT NULL,政治面貌 varchar(10) NOT NULL DEFAULT 群众,姓名 varchar(20) NOT NULL,出生日期 date NOT NULL,PRIM…
阅读更多...
海外紧固件市场格局与发展趋势研究报

海外紧固件市场格局与发展趋势研究报

一、引言 紧固件作为各类机械装备、建筑结构以及电子设备中不可或缺的基础性零部件&#xff0c;在国民经济的各个领域都有着广泛应用。其市场动态与全球经济发展态势以及各行业的兴衰紧密相连。在全球化进程不断加速、产业分工日益精细的大背景下&#xff0c;深入研究海外紧固…
阅读更多...
【多学科稳定EI会议大合集】计算机应用、通信信号、电气能源工程、社科经管教育、光学光电、遥感测绘、生物医学等多学科征稿！

【多学科稳定EI会议大合集】计算机应用、通信信号、电气能源工程、社科经管教育、光学光电、遥感测绘、生物医学等多学科征稿！

在当今科技高速发展的时代&#xff0c;多学科领域的学术交流与融合显得尤为重要。以下是稳定EI会议合集&#xff0c;涵盖计算机、信息通信、电气能源、社科经管教育、光学遥感、生物医学等多个学科领域。 会议皆已通过国际知名出版社出版审核&#xff0c;EI检索稳定&#xff0…
阅读更多...
【深度学习新浪潮】展平RVQ技术详解

【深度学习新浪潮】展平RVQ技术详解

展平 RVQ（Flattened Residual Vector Quantization）是一种基于矢量量化（Vector Quantization, VQ）的技术，主要用于高效地表示和压缩数据（例如图像、音频或文本嵌入）。它结合了**残差矢量量化（Residual Vector Quantization, RVQ）**的思想与“展平”操作，从而进一步优…
阅读更多...
【第23节】windows网络编程模型(WSAEventSelect模型)

【第23节】windows网络编程模型(WSAEventSelect模型)

目录 引言 一、WSAEventSelect模型概述 二、 WSAEventSelect模型的实现流程 2.1 创建一个事件对象&#xff0c;注册网络事件 2.2 等待网络事件发生 2.3 获取网络事件 2.4 手动设置信号量和释放资源 三、 WSAEventSelect模型伪代码示例 四、完整实践示例代码 引言 在网…
阅读更多...
LlamaFactory部署及模型微调【win10环境】

LlamaFactory部署及模型微调【win10环境】

1.Llama-Factory简介 LLaMA-Factory&#xff0c;全称 Large Language Model Factory&#xff0c;旨在简化大模型的微调过程&#xff0c;帮助开发者快速适应特定任务需求&#xff0c;提升模型表现。它支持多种预训练模型和微调算法&#xff0c;适用于智能客服、语音识别、机器翻…
阅读更多...
Jmeter简介、学习目标及安装启动

Jmeter简介、学习目标及安装启动

1. 简介 JMeter 是 Apache 组织使用 Java 开发的一款测试工具&#xff1a;可以用于对服务器、网络或对象模拟巨大的负载&#xff1b;通过创建带有断言的脚本来验证程序是否能返回期望的结果。 1&#xff09;优点&#xff1a;开源、免费&#xff1b;跨平台&#xff1b;支持多协…
阅读更多...
无参数读文件和RCE

无参数读文件和RCE

什么是无参数&#xff1f; 无参数&#xff08;No-Argument&#xff09;的概念&#xff0c;顾名思义&#xff0c;就是在PHP中调用函数时&#xff0c;不传递任何参数。我们需要利用仅靠函数本身的返回值或嵌套无参数函数的方式&#xff0c;达到读取文件或远程命令执行&#xff0…
阅读更多...
细胞内与细胞间网络整合分析！神经网络+细胞通讯，这个单细胞分析工具一箭双雕了（scTenifoldXct）

细胞内与细胞间网络整合分析！神经网络+细胞通讯，这个单细胞分析工具一箭双雕了（scTenifoldXct）

生信碱移 细胞间-细胞内通讯网络分析 scTenifoldXct&#xff0c;一种结合了细胞内和细胞间基因网络的计算工具&#xff0c;利用 scRNA-seq 数据检测细胞间相互作用。 单细胞 RNA 测序&#xff08;scRNA-seq&#xff09;能够以稳健且可重复的方式同时收集数万个细胞的转录组信息…
阅读更多...
怎么处理 Vue 项目中的错误的？

怎么处理 Vue 项目中的错误的？

一、错误类型 任何一个框架，对于错误的处理都是一种必备的能力 在Vue 中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。 主要的错误来源包括： 后端接口错误代码中本身逻辑错误二、如何处理 后端接口错误 通过axi…
阅读更多...
05.AI搭建preparationの(transformers01)BertTokenizer实现分词编码

05.AI搭建preparationの(transformers01)BertTokenizer实现分词编码

一、下载 bert-base-chinese镜像下载 二、简介作用&#xff1a; 模型每个参数占用的字节大小模型大小模型大小层数头数GPT-14 个字节的 FP32 精度浮点数117M446MB1212GPT-22 个字节的 FP161.5亿到1.75亿0.5GB到1.5GB4816GPT-32 个字节的 FP161.75万亿&#xff08;17500亿&a…
阅读更多...
工业4G路由器赋能智慧停车场高效管理

工业4G路由器赋能智慧停车场高效管理

工业4G路由器作为智慧停车场管理系统通信核心&#xff0c;将停车场内的各个子系统连接起来&#xff0c;包括车牌识别系统、道闸控制系统、车位检测系统、收费系统以及监控系统等。通过4G网络&#xff0c;将这些系统采集到的数据传输到云端服务器或管理中心&#xff0c;实现信息…
阅读更多...
git 基础操作

git 基础操作

1. git 的安装 与 卸载 1.1. git 的安装 判断是否安装 git git --version 安装 git: centos: sudo yum -y install git ubuntu: sudo apt-get install git -y windows: 3.安装git和图形化界面工具_哔哩哔哩_bilibili 1.2. git 的卸载 判断是否安装 git git --version…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023