video标签知多少
视频对于现在的web来说已经见怪不怪了，如何在web上播放视频呢？有请我们今天的主角video标签。
用法
您的当前设备不支持video标签
默认效果如下：
支持的内容情况
我们都知道视频格式有很多，但是很不幸，目前video标签只支持3种视频格式，分别是“mp4”、“webm”、“ogg”。
video标签常用属性介绍
属性描述autoplay控制视频是否自动播放controls控制视频是否显示控件height控制视频播放器的高度width控制视频播放器的宽度loop控制视频是否循环播放source标签常用属性介绍
属性描述src视频的地址type视频的类型。可选值：“video/mp4”、“video/ogg”、“video/webm”设置播放器的样式
自己准备一个mp4类型的视频，然后将它嵌入到我们的video标签里，同时给标签设置样式如下：
video {
margin-top: 100px;
margin-left: 500px;
width: 500px;
}
如果不出意外的话，目前是下面这样的：
但是如果我们同时设置了高度，高度800px或者100px，或者是不成比例的设置，那么就会出现不协调的现象，比如下面：
出现这种不协调的问题其实很好解释，因为视频本身也是由很多张图片组成的嘛。当我们给图片设置“怪异比例”的时候，图片可能会出现压缩、伸长、或者大片的黑色部分。
如何让视频内容占满指定的宽度和高度呢？
我们一般是给video标签外套一个div元素，然后同时给video标签的宽度和高度都设置100%，并且将object-fit属性值设置为“fill”。
我们再来看一下，视频设置前后的样式对比：
设置前的样式如下：
设置后的样式如下：
我们可以看到，视频内容现在是占满宽高了，但此时的问题也明显了，视频变形了。
video标签常用事件介绍
属性描述loadstart当浏览器开始查找视频时触发durationchange当视频的时长已更改时触发loadedmetadata当浏览器已加载视频的元数据时触发。元数据是指：视频的时长+视频的尺寸+文本轨道loadeddata当浏览器已加载视频的当前帧时触发progress当浏览器正在下载视频时触发canplay当浏览器可以开始播放视频时触发放waiting当视频由于需要缓冲下一帧而停止时触发video标签常用方法介绍
重新加载视频
播放视频
视频暂停播放
视频进入全屏模式
我们可以通过 FullScreen API来完成这个功能。对video标签使用这些方法有几点需要注意：
当video标签加载完毕后，才可以调用 FullScreen API。FullScreen API 存在兼容性问题，需要在前面加上各自浏览器内核的前缀。想要实现video标签放大的功能有下面几种方式：
1、使用原生的API。requestFullscreen（非ios可用）、webkitEnterFullScreen（ios可用）。这里需要动态判断你的设备支持哪种API。
2、使用 css+js 来完成假全屏。