HTML5中的video标签

在写上一篇博文《写在中国足协主席陈戌源接受审查调查之际》时，需要插入一段视频，因此研究了下video标签，这里做些笔记记录。

在浏览器里插入视频，比较流行的做法是直接复制各大视频网站提供的分享代码，以框架的方式引入，这种方式的缺点显而易见。

第二种方式是使用开源的播放器，很多年前我就研究过。（搜索了下博客，2012年7月写过一篇《html5音视频播放器》，距今已经12年了。）这种方式的要点是引入一个js的播放器库。除了上面这篇12年前的文章里提到的一些js播放器，目前流行的网页端播放器还有–DPlayer，artplayer 等。

#腾讯视频的分享代码示例

<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=o3502tpm7d3"
allowFullScreen="true"></iframe>

当年需要引入js播放器库，是因为很多浏览器，终端不支持直接播放视频文件。html5时代以后，播放视频成为了浏览器的基本功能，不需要再次引入js播放库了。（当然有特殊需求，比如美化，弹幕交流等需求除外，这也是DPlayer这样的播放器还流行的重要原因。）

video标签

video是html5中新增的标签，作用是将视频嵌入到网页中。

video标签详情，英文版–video element ，中文简介–video标签 。

video标签的主要属性如下：

属性名称	说明
src	视频地址
crossorigin	视频文件跨域问题。crossorigin=”anonymous”
poster	可以用一张图片做视频的封面
preload	视频是否自动加载
autoplay	视频是否自动播放
playsinline	适应不同的播放终端屏幕
loop	循环播放
muted	是否静音播放
controls	是否显示控制条
width	整个播放界面的宽度。与height值比率会决定视频的显示比率。
height	整个播放界面的高度。

video标签的用法：

<video id="video" width="800" height="450" controls="" preload="auto" poster="https://cdn.jiangyu.org/2023/2/zxy-cover.jpg">
<source id="mp4" src="https://dropbox.jiangyu.org/d/share/share/blog/20230214.mp4?sign=J3QIdcH8xgd5Y1d7JRG6KQWnZUnMZUtNNJu8wfMyiDc=:0" type="video/mp4">
</video>

支持video标签的浏览器

通过这个工具 Can I use… 我们可以查询使用的浏览器是否支持video标签。

目前绝大部分浏览器都支持video标签，支持的统计数字是98.8%。

上述这个工具网站还能查询相应的浏览器是否支持AV1，H.265等视频格式以及一些video标签里特殊功能。

比如在安防领域常用的H.265编码格式，浏览器支持的并不好。

子标签track的使用

在写上面提到的那篇文章时，了解到video，audio两个media标签还有一个track子标签。可以用来给视频或音频外挂字幕。上面那篇文章里的视频默认没字幕，正好给它加上。

关于track子标签的详细介绍：track: The Embed Text Track element

外挂字幕必须使用 WebVTT格式 的文件，后缀是.vtt。

一个简单的.vtt文件是这样的：

WEBVTT

00:01.000 --> 00:04.000
- Never drink liquid nitrogen.

00:05.000 --> 00:09.000
- It will perforate your stomach.
- You could die.

我们可以手动制作.vtt格式的外挂字幕，也可以使用这个工具–WebVTT视频字幕在线生成工具 。更详细的.vtt字幕制作方法可以参考这篇文章–《玩转HTML5 Video视频WebVTT字幕使用样式与制作》

最后附上外挂字幕的 demo

（P.S.碰到一个问题，chrome浏览器居然显示不了这个外挂的字幕，开始以为是其他问题，比如跨域，字幕格式有问题等等，一一排查了都不是。因为edge浏览器能正常显示这个字幕。暂时不管了，以后再研究。）