接了个html5视频背景的需求

遇到的一些问题以及解决方案，先上代码：

<style>
	video{ object-fit: cover; }
</style>
<video autoplay loop muted poster="https://help-video-oss.oss-cn-hangzhou.aliyuncs.com/youguo/banner.jpg">
	<source src="https://help-video-oss.oss-cn-hangzhou.aliyuncs.com/youguo/banner_webm.webm" type="video/webm">
	<source src="https://help-video-oss.oss-cn-hangzhou.aliyuncs.com/youguo/banner_mp4.mp4" type="video/mp4">
	<source src="https://help-video-oss.oss-cn-hangzhou.aliyuncs.com/youguo/banner_ogg.ogg" type="video/ogg">
</video>

1、解决显示器不同分辨率导致上下有黑边：

video{ object-fit: cover; }

属性	描述
fill	默认值。整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应
contain	整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”
cover	被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应
none	内容尺寸不会被改变
scale-down	内容的尺寸就像是指定了none或contain，默认应用尺寸最小的值

还有另外一个用来定位的属性object-position也了解一下吧，有点类似background-size和background-position

2、video下autoplay属性无效：

muted 高版本浏览器，对视频静音后让视频自动播放，我也不知道什么版本才算高版本，大佬们说了算
autoplay 自动播放
loop 循环
poster 视频无法播放时显示的图片

3、放几个不同格式的视频兼容浏览器，不解释：

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (从 Opera 25 起)	YES	YES

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 （这个要注意，格式工厂了解一下） MIME-type：video/mp4
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 MIME-type：video/webm
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MIME-type：video/ogg

据说还有一个黑科技叫做html5media.js，没用过，不知道好不好用，网友们都在推荐这个玩意儿，可以试试~

https://html5media.info/

参考文档：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-position
http://www.runoob.com/html/html5-video.html
http://www.runoob.com/tags/ref-av-dom.html

上线之后两天补充:

本来以为万事大吉，尼玛！！发现微信内部浏览器、以及大部分安卓手机自带的浏览器、苹果没测（还不是因为没有苹果机）一打开页面会出现视频占满了屏幕，没有缩小和关闭视频的按钮，就这样干巴巴看着视频无限洗脑循环。嗯，产品大大发话了，移动端不用显示视频，直接显示备用图片。于是：

<script>
$(function(){
    $("video").remove();
});
</script>

骚年，多测试测试呀~