一、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. Jmeter基础教程图文版（二）- 核心组件

    ⚪Jmeter Apache JMeter 是 Apache 组织开发的基于 Java 的压力测试工具.用于对软件做压力测试,它最初被设计用于 Web 应用测试,但后来扩展到其他测试领域. 它可以用于 ...

  2. Mysql的两种存储引擎以及区别

    一.Mysql的两种存储引擎 1.MyISAM: ①不支持事务,但是整个操作是原子性的(事务具备四种特性:原子性.一致性.隔离性.持久性) ②不支持外键,支持表锁,每次所住的是整张表     MyIS ...

  3. 谈谈你对HTML语义化的理解。

    1.什么是HTML语义化? 基本上都是围绕着几个主要的标签,像标题(h1-h6),列表(li),强调(strong em)等. 根据内容的语义化(内容结构化),选择合适的标签(代码语义化),便于开发者 ...

  4. 纯css写一个大太阳的天气图标

    效果 效果图如下 ​ 实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构 用两个嵌套的div容器,父容器来 ...

  5. Java面试-容器的遍历

    当我们用增强for循环遍历非并发容器(HashMap.ArrayList等),如果修改其结构,会抛出异常ConcurrentModificationException,因此在阿里巴巴的Java规范中有 ...

  6. Flink1.9整合Kafka

    本文基于Flink1.9版本简述如何连接Kafka. 流式连接器 我们知道可以自己来开发Source 和 Sink ,但是一些比较基本的 Source 和 Sink 已经内置在 Flink 里. 预定 ...

  7. MyBatis 3.5.2 新特性介绍

    1.MyBatis 最新版本 3.5.2 发布 MyBatis最新版本是:3.5.2,发布时间是:2019年7月15日 2.MyBatis 3.5.2 新特征介绍 我们知道,MyBatis 是支持定制 ...

  8. 《JavaScript DOM 编程艺术》 学习笔记

    目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...

  9. 利用kubeadm快速部署 kubernetes 集群

    结合一下两个教程 https://www.cnblogs.com/along21/p/10303495.html 链接:https://pan.baidu.com/s/1O_pcywfso4VFOsF ...

  10. 【linux】【gitlab】gitlab安装、备份、恢复、升级、内存消耗问题

    前言 GitLab:GitLab 是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具,并在此基础上搭建起来的web服务.功能:Gitlab 是一个提供代码托管.提交审核和问题跟踪的代码管理平 ...