码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 video视频字幕的使用和制作

时间:2019-05-27 13:48:21      阅读:329      评论:0      收藏:0      [点我收藏+]

标签:src   title   pos   https   bsp   ngx   循环   span   ora   

一、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

定义字幕内容类型,只能是这五种之一: subtitlescaptionsdescriptionschaptersmetadata.

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 嘿,这是创建一个业务
6 
7 200:00:18.930 --> 00:00:22.490
8 就是我和你
9 和你爱的生活。

 

五、视频和字幕的制作例子演示:

 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>

 

HTML5 video视频字幕的使用和制作

标签:src   title   pos   https   bsp   ngx   循环   span   ora   

原文地址:https://www.cnblogs.com/jing-tian/p/10930085.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!