简介

<video> HTML 元素用于在文档中嵌入媒体播放器，用于支持文档内的视频播放。 <video> 标签也可用于播放音频，但播放音频用 <audio>更加适合。

 <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:

• MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
• WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
• Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

基础写法

<div class="media">
    <video autoplay="" loop="" id="videos">
        <source src="XXX/XXX/XXX.ogv">
        <source src="XXX/XXX/XXX.MP4">
        Your browser does not support the Video tag.
    </video>
</div>

主要内容请参考：<video> MDN

1.属性

1.1 常用属性：

属性	说明
autoplay	自动播放；某些浏览器中，如果没有设置 muted 属性，autoplay 将不会生效
controls	视频底部提供一个控制面板
controlslist	控制面板上显示哪些 video 元素控件
loop	视频播放结束的时候，自动返回视频开始的地方，继续播放
muted	音频会初始化为静音，默认值是 false,
src	要嵌到页面的视频的 URL。可选；你也可以使用 video 块内的 <source> 元素来指定需要嵌到页面的视频。
width	视频显示区域的宽度，单位是 CSS像素（仅限绝对值；不支持百分比）
height	视频显示区域的高度，单位是 CSS像素（仅限绝对值；不支持百分比）
disablepictureinpicture	防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式。

1.2 部分属性说明：

• autoplay：一般浏览器是默认不会自动播放，若设置了该属性，某些情况下需要设置 muted,
• controlslist: controlslist="nofullscreen nodownload  noplaybackrate "；nofullscreen：禁用全屏；nodownload：禁用下载；noplaybackrate：禁用倍速；

2.事件

2.1常见事件

事件	说明
canplay	浏览器可以播放媒体，但估计尚未缓冲足够的数据。回调参数为e, e.target.duration 获取视频总时长（单位：秒）
canplaythrough	浏览器估计它可以不间断地播放到媒体末尾，无需暂停以进行内容缓冲。
timeupdate	由 currentTime 属性指示的播放时间已更新； e.target.currentTime 拿到当前播放的时刻
pause	暂停
play	开始播放
ended	视频停止播放，因为媒体已经到达结束点。
error	获取媒体数据时出现错误，或者资源的格式不受支持
playing	已经在暂停或因数据不足而延迟后准备好进行播放。就是重新播放
progress	加载资源时触发 ，video.buffered.end(0)获取缓冲时间
seeked	拖动进度条操作完成
seeking	拖动进度条操作开始
waiting	缺少数据暂停
loadstart	浏览器开始加载资源时触发。
loadeddata	媒体的首帧已加载完成。
loadedmetadata	元数据已加载完毕。

3. 几个时间

3.1 video的视频时长

通过 video.duration,以秒为单位。注意在canplay、canplaythrough、loadeddata、loadedmetadata 事件回调中拿到真实的时长。

3.2获取视频的缓冲时间

 监听 progress 事件，video.buffered 拿到的是一个时间timeRange对象，有start方法跟end方法，分别获取拿到的时间范围的开始时间跟结束时间。缓冲范围指的是已缓冲音视频的时间范围。如果用户在音视频中跳跃播放，会得到多个缓冲范围。

3.3获取视频的实时时长

监听 timeupdate 事件，通过 video.currentTime 获取实时时长。

4.常用方法

• video.pause() -- 暂停 返回 promise
• video.play() -- 播放
• video.load() -- 加载

5.多个source

简介示例提供了两种种不同的媒体源，从而使视频在任何浏览器支持的视频编解码器环境下都能观看。若无法播放视频源，则显示提示文字。

6.其他使用说明

• 对于操作 css 样式，可以将 display 设置成 block ,方便调整大小位置。若要视频完全填满，可使用object-fit: fill;
• 使用 object-position 属性调整视频在元素框内的位置；
• 添加字幕可参考：video 标签 添加字幕
• 一般video的属性方法，在audio中可通用
• 可以使用video为音频添加字幕，因为audio不可添加WebVTT字幕