一、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. JS千分位格式化方法,以及多种方法性能比较

    方法一字符串版 function toThousands(num) { var result = '', counter = 0; num = (num || 0).toString(); for ( ...

  2. JavaScript数组和伪数组

    伪数组和数组 记住一句话: 伪数组是一个Object,数组是Array. 对象和数组之间的关系 JavaScript的内置函数继承与 Object.prototype. 可以认为new Array() ...

  3. vmware vsphere client 创建虚拟机

    浏览器访问https://192.168.120.29 用户名:administrator@zhcs.com 密码:  Deyi123456! 说明:此案例为创建linux的Centos7的操作系统的 ...

  4. Linux服务器CPU性能模式

    环境: Red Hat Enterprise Linux 4 Red Hat Enterprise Linux 5 Red Hat Enterprise Linux 6 Red Hat Enterpr ...

  5. Linux常用命令 —— 进程类

    service (CentOs6) 1.service   服务名   start         --------------   启动 2.service   服务名   stop        ...

  6. ios 各个手机型号尺寸及分辨率适配

    常用宏 // 判断是否是ipad #define isPad ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdio ...

  7. 读取用户输入并判断的bash脚本

    #!/bin/bash echo -e "1) A"echo -e "2) B"echo -e "3) C"echo -e "4) ...

  8. C++基础之适配器

    什么是容器适配器? ”适配器是使一种事物的行为类似于另外一种事物行为的一种机制”,适配器对容器进行包装,使其表现出另外一种行为.例如,stack<int, vector<int> & ...

  9. 前台提交数据到node服务器（post方式）

    post方式同样有两种办法,一种是表单提交,一种是ajax提交. 在此之前需要安装一个中间件:body-parser,安装好后在app.js头部引入: bodyParser = require('bo ...

  10. 程序员接触新语言————hello world ^-^,web3种样式表

    我的第一个网页 <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...