一、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一小部分属性可以使用：

  1. color
  2. opacity
  3. visibility
  4. text-decoration
  5. text-shadow
  6. background 速记性能　　background-color、background-position....
  7. outline  速记性能
  8. font 　　 速记属性   /font-size、font-weight....
  9. line-height
  10. 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视频字幕的使用和制作的更多相关文章

  1. HTML5 Video(视频)

    HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...

  2. HTML5: HTML5 Video(视频)

    ylbtech-HTML5: HTML5 Video(视频) 1.返回顶部 1. HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 ...

  3. 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决

    为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...

  4. html5开发<video>视频字幕的程序

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8 ...

  5. HTML5 video 视频标签 常用属性

    最近在做手机端的 h5 页面的视频直播功能,用到了 Video 标签.其常用的属性有以下几个: src.poster.preload.autoplay.loop.controls.width.heig ...

  6. 让所有浏览器支持HTML5 video视频标签

    HTML5究竟需要多少种视频编码格式 当前,video 元素支持三种视频格式:Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编 ...

  7. HTML5 video 视频标签全属性详解

    现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...

  8. 给HTML5 Video 设置多语言字幕文件

    现在各种支持HTML5的浏览器都能够播放html5视频了,但是对于字幕的支持却很少,我们期待像DVD那样强大的字幕. 往往我们还不得不通过js来做,着实是一件痛苦的事情. 现在IE10率先对HTML5 ...

  9. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

随机推荐

  1. SVN更新失败

    一.svn更新失败 使用svn遇到的问题是,更新失败,代码被锁定. 解决办法: 在项目上右键,如图所示: 图一: ​ 图二: ​ 之后再更新,基本上都没有问题了.如果还有问题,看下面. 二.工具清理 ...

  2. 【1】KNN（K-nearest neighbors algorithm）

    基本原理 KNN算法又叫最近邻居法,是一种非常简单易于掌握的分类算法. 其基本原理是,存在一个已知标签的数据集合,也就是训练样本集. 这个样本集中的每一个数据所属的分类都是已知的. 当一个没有标签的新 ...

  3. WoSign新证书系统通过德国Cure53安全测试

    近日,沃通WoSign新证书系统顺利通过德国Cure53白盒子安全测试,并公开发布审计报告总结版. 据悉,根据去年10月份Mozilla提出的整改要求,沃通WoSign投入研发力量高标准严要求地重新开 ...

  4. Go语言标准库之net_http

    Go语言内置的net/http包十分的优秀,提供了HTTP客户端和服务端的实现. net/http介绍 Go语言内置的net/http包提供了HTTP客户端和服务端的实现. HTTP协议 超文本传输协 ...

  5. Spring Cloud(一)：服务注册与发现

    Spring Cloud是什么 Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.消息总线.负载均 ...

  6. 在64位Linux上安装32位gmp大数库

    前期准备: 如果没有安装32位gcc和g++环境的话,可能会导致安装失败,此时请参考上一篇博文 http://www.cnblogs.com/weir007/p/5977759.html,根据系统版本 ...

  7. 判断是手机端还是PC短访问

    第一种:判断是手机访问还是PC访问 <script> function browserRedirect() { var sUserAgent = navigator.userAgent.t ...

  8. [Leetcode] 第319题 灯泡开关

    一.题目描述 初始时有 n 个灯泡关闭. 第 1 轮,你打开所有的灯泡. 第 2 轮,每两个灯泡你关闭一次. 第 3 轮,每三个灯泡切换一次开关(如果关闭则开启,如果开启则关闭).第 i 轮,每 i  ...

  9. [Leetcode] 第289题 生命游戏

    一.题目描述 根据百度百科,生命游戏,简称为生命,是英国数学家约翰·何顿·康威在1970年发明的细胞自动机. 给定一个包含 m × n 个格子的面板,每一个格子都可以看成是一个细胞.每个细胞具有一个初 ...

  10. JavaScript之数据类型转换

    JavaScript中有多种数据类型,在实际工作中,不管是有意还是无意的,我们总能碰到不一样的数据类型值之间进行运算,或者我想从用户输入获得一个数字时,而用户却输入了一个字符串,这种时候就需要用到今天 ...