HTML5 video视频字幕的使用和制作
- http://blog.gufang.org/
- 2024/5/6 2:19:43
- 来源：Gufang's Private Space
- 点击：
一、video支持视频格式：
以下是三种最常用的格式
1、 ogg格式：带有Theora视频编码（免费）+Vorbis音频编码的Ogg文件（免费） 支持的浏览器：firefox、chrome、opera2、 MPEG4格式：带有H.264视频编码（收费）+AAC音频编码的MPEG4文件（收费） 支持的浏览器：safari、chrome3、 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==标签等。
五、视频和字幕的制作例子演示：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style> 5 video::cue{ 6 background-color:transparent; 7 color:white; 8 font-size:20px; 9 line-height: 100px; 10 } 11 </style> 12 </head> 13 <body> 14 15 <video controls="controls"> 16 <source src="黑客军团第一季1.mp4" type="video/mp4"/> 17 <track src="a.vtt" label="中文" srclang="zh" kind="subtitles" default/> 18 <track src="b.vtt" label="english" srclang="en" kind="subtitles" /> 19 </video> 20 </body> 21 </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
演示：
---
| 1234567 | // 设置单行字幕的样式 video::cue(v[voice=aa]){ color:green;}video::cue(v[voice=bb]){ color:rgb(0, 26, 128);} |
- 上一篇：苏马湾酒词牌
- 下一篇：html5新媒体播放器标签video、audio
发表评论(0)
