一、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. Android源码阅读技巧--查找开发者选项中显示触摸操作源码

    在开发者模式下,在开发者选项中,可以勾选“显示触摸操作”,然后只要点击屏幕就会在点击的位置有圈圈显示.如何找到绘制圈圈的代码部分,有什么技巧来阅读代码量这么大的android系统源码呢?以下请跟着小老 ...

  2. Codeforces1093E_Intersection of Permutations

    题意 给定两个排列a和b,两种操作,交换b_i和b_j,询问a[l_a...r_a]和b[l_b...r_b]有多少个数相同. 分析 由于给的是排列,保证b的每个数都有a的对应,构造数组c,c[i]表 ...

  3. Python作业本——第3章 函数

    今天看完了第三章,习题都是一些概念性的问题,就不一一解答了. 实践项目是创建一个Collatz序列,并且加上验证输入是不是一个整数. def collatz(number): if number % ...

  4. sql 多行、一行 互转

    原始数据: 期望数据: IF OBJECT_ID('temp_20170701','u') IS NOT NULL DROP TABLE temp_20170701 CREATE TABLE temp ...

  5. PHP 异或 算法

    /** * PHP字符串“异或”算法 * param array key * @param Request $request * @return mixed|string|void */ public ...

  6. 人体行为识别（骨架提取），搭建openpose环境，VS2019(python3.7)+openpose

    这几天开始接触人体行为识别,经过多方对比后,选择了现在最热的人体骨架提取开源库,openpose. 下面就不多说了,直接开始openpose在win10下的配置: 需求如下:1. VS2019    ...

  7. 初学FPGA-IP核错误

    [BD 5-336] This command cannot be run, as the BD-design is locked. Locked reason(s):* BD design cont ...

  8. PyCharm2019激活

    PyCharm下载地址:https://www.jetbrains.com/pycharm/download/ 永久激活 这里主要介绍永久激活的方式,永久激活后,就可以放心使用了,一劳永逸,5分钟就能 ...

  9. iOS上架的整体流程和建议

    App Store上架指的是iOS应用从提交申请到上线的整个过程,它的目的是让应用展示在App Store上获取流量.用户. 一.iOS上架的整体流程 1.申请开发者账号 苹果的开发者账号主要分为三种 ...

  10. NPOI导出数值格式设置（我是保留四位小数，不足补0）

    看了网上好多帖子,都是保留两位小数的,写法是: HSSFDataFormat.GetBuiltinFormat("0.00"); 于是想四位小数,就是多加两个00,变成: HSSF ...