HTML5 video视频字幕的使用和制作
一、video支持视频格式：
以下是三种最常用的格式
1、 ogg格式：带有Theora视频编码（免费）+Vorbis音频编码的Ogg文件（免费） 支持的浏览器：firefox、chrome、opera 2、 MPEG4格式：带有H.264视频编码（收费）+AAC音频编码的MPEG4文件（收费） 支持的浏览器：safari、chrome 3、 Webm格式：带有VP8视频编码（免费）+Vorbis音频编码的WebM格式（免费） 支持的浏览器：IE、firefox、chrome、opera 优势：全免费、压缩比较好（小）、视频质量好 劣势：视频少、转码器几乎没有，不好转码
二、video标签内属性代码：加粗是常用标签属性
|
属性 |
值 |
功能描述 |
|
controls |
controls |
是否显示播放控件 |
|
autoplay |
autoplay |
设置是否打开浏览器后自动播放 |
|
width |
Pilex（像素） |
设置播放器的宽度 |
|
height |
Pilex（像素） |
设置播放器的高度 |
|
loop |
loop |
设置视频是否循环播放（即播放完后继续重新播放） |
|
preload |
preload |
设置是否等加载完再播放 |
|
src |
url |
设置要播放视频的url地址 |
|
poster |
imgurl |
设置播放器初始默认显示图片 |
|
autobuffer |
autobuffer |
设置为浏览器缓冲方式，不设置autoply才有效 |
三、source标签代码：
src：指明视频所在路径 type：指定视频的格式
四、track字幕标签属性代码：
| 属性 | 描述 |
|---|---|
|
kind |
定义字幕内容类型，只能是这五种之一: subtitles, captions, descriptions, chapters, metadata. |
|
src |
字幕文件的URL地址 |
|
srclang |
字幕文件的语言类型，标识信息的作用，播放器不使用这个属性。 |
|
label |
字幕标签，每个字幕元素必需设置一个唯一不重复的标签，切换字幕时显示的名称。 |
|
default |
指定是否是默认字幕。如果每个都不指定，将不会自动显示字幕. |
后缀为vtt字幕文件的格式在网上不多见，常见的还是srt格式，这里提供将srt字幕文件格式转换为vtt格式：https://atelier.u-sub.net/srt2vtt/
对于视频文件，可以自己在线做成。也可以在网络上去找到相关的资源。：https://www.zhangxinxu.com/sp/webvtt.html
.vtt文件格式说明：是一个以 UTF-8 为编码，以 .vtt 为文件扩展名的简单文本文件。.vtt字幕文件开头若是不写WEBVTT则字幕文件不会成功加载到视频 例如文件内容:包含提示，可以是单行或多行 1 WEBVTT
2
3 100:00:00.160 --> 00:00:18.930
4
5 嘿，这是<b>创建</b>一个业务
6
7 200:00:18.930 --> 00:00:22.490
8 就是<i>我和你</i>
9 和你爱的生活。
WebVTT字幕文本还支持一些HTML标签进行样式控制，常见的有声音 ==v== 标签，颜色 ==c== 标签，加粗==b==标签，倾斜==i==标签，下划线==u==标签，还有==ruby==和==lang==标签等。
五、视频和字幕的制作例子演示：
<!DOCTYPE HTML>
<html>
<head>
<style>
video::cue{
background-color:transparent;
color:white;
font-size:20px;
line-height: 100px;
}
</style>
</head>
<body> <video controls="controls">
<source src="黑客军团第一季1.mp4" type="video/mp4"/>
<track src="a.vtt" label="中文" srclang="zh" kind="subtitles" default/>
<track src="b.vtt" label="english" srclang="en" kind="subtitles" />
</video>
</body>
</html>
六、字幕css样式设置: cue CSS伪元素匹配所选元素中的WebVTT提示。这可以用于在VTT轨道的媒体中使用字幕和其他线索。只有CSS一小部分属性可以使用：
- color
- opacity
- visibility
- text-decoration
- text-shadow
- background 速记性能 background-color、background-position....
- outline 速记性能
- font 速记属性 /font-size、font-weight....
- line-height
- white-space
演示：
//设置字幕的样式
video::cue{
background-color:transparent;
color:white;
font-size:20px;
line-height: 100px;
}
// 设置单行字幕的样式
video::cue(v[voice=aa]){
color:green;
}
video::cue(v[voice=bb]){
color:rgb(0, 26, 128);
}
HTML5 video视频字幕的使用和制作的更多相关文章
- HTML5 Video(视频)
HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...
- HTML5: HTML5 Video(视频)
ylbtech-HTML5: HTML5 Video(视频) 1.返回顶部 1. HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 ...
- 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决
为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...
- html5开发<video>视频字幕的程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8 ...
- HTML5 video 视频标签 常用属性
最近在做手机端的 h5 页面的视频直播功能,用到了 Video 标签.其常用的属性有以下几个: src.poster.preload.autoplay.loop.controls.width.heig ...
- 让所有浏览器支持HTML5 video视频标签
HTML5究竟需要多少种视频编码格式 当前,video 元素支持三种视频格式:Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编 ...
- HTML5 video 视频标签全属性详解
现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...
- 给HTML5 Video 设置多语言字幕文件
现在各种支持HTML5的浏览器都能够播放html5视频了,但是对于字幕的支持却很少,我们期待像DVD那样强大的字幕. 往往我们还不得不通过js来做,着实是一件痛苦的事情. 现在IE10率先对HTML5 ...
- HTML5 video标签播放视频下载原理
HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...
随机推荐
- Excel如何动态获取列名
遇到一个动态列,N行数据的求和,但是求和时需要Excel列名(A,B,C...)当时觉得这太非常难了.后来仔细研究了下Excel列名,都是从A到Z,然后AA再到AZ,以此类推. 如此的话就好弄了.通过 ...
- React-router总结
版本 v3和v4有一些差距: https://blog.csdn.net/qq_35484341/article/details/80500237 以下的总结,都是基于V4的 官方文档:https:/ ...
- Spring Cloud Alibaba | Sentinel：分布式系统的流量防卫兵进阶实战
Spring Cloud Alibaba | Sentinel:分布式系统的流量防卫兵进阶实战 在阅读本文前,建议先阅读<Spring Cloud Alibaba | Sentinel:分布式系 ...
- Java基础语法（总结篇）
关键字&标识符 关键字的概念与特征 概念:Java关键字是事先定义好的对Java的编译器有特殊的意义,他们用来表示一种数据类型,或者表示程序的结构等,关键字不能用作变量名.方法名.类名.包名和 ...
- golang开发:类库篇(五)go测试工具goconvey的使用
为什么要使用goconvey测试程序 goconvey 集成go test,go test 无缝接入.管理运行测试用例,而且提供了丰富的函数断言.非常友好的WEB界面,直观的查看测试结果. 如果没有g ...
- WInform中实现设置ZedGraph中曲线的X轴与Y轴的上限与下限
场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
- Hadoop学习笔记—20.网站日志分析项目案例
1.1 项目来源 本次要实践的数据日志来源于国内某技术学习论坛,该论坛由某培训机构主办,汇聚了众多技术学习者,每天都有人发帖.回帖,如图1所示. 图1 项目来源网站-技术学习论坛 本次实践的目的就在于 ...
- HBase 官方文档0.90.4
HBase 官方文档0.90.4 Copyright © 2010 Apache Software Foundation, 盛大游戏-数据仓库团队-颜开(译) Revision History Rev ...
- Tomcat9 安装与配置
一.下载 到http://tomcat.apache.org/下载绿色解压包 二.启动 1.解压后打开tomcat/bin目录下的startup.bat即可启动 打开后发现出现乱码 解决方法: 打开t ...
- Navicat Premium 连oralce报错：oracle library is not loaded
我装的Navicat Premium是64位的,计算机也是64位的,故在oracle网上下了一个64位的instantclient-basic-windows.x64-11.2.0.4.0.zip 地 ...