需求：
视频在一个div中自动播放并作为背景，该视频必须完全填充在该div中，视频不能溢出div，
HTML中加入视频很简单加一个
<video> </video>
即可
现在要设置视频为背景，上层还有图片、文字、等；
视频width、height大小和所存放视频的div设置的width、height大小不同，视频可能会出现不是理想的效果
这时视频width和weight设置为100%，已经到达视频原有的最大尺寸，但是还无法完全覆盖我们的div，所以现在要设置视频
Video
的属性和其父级DIV的属性：
.video_back {
/*设置视频最小宽度和高度 这个设不设置没有什么影响 */
/*min-width: 100%;
min-height:100%;*/
width: 100% !important;
height: 100%;
/*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。可以根据实际情况修改*/
position: absolute;
/*这里我试了一下好像只要是矩形的四个角的的点都行,也就是说right:0;bottom:0;也可以*/
left: 0;
top: 0;
/*将视频放在元素的堆叠顺序最底层，以防覆盖其他东西*/
z-index: -9999;
/*被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。*/
object-fit: fill;
#parent{
几个重要的设置：
- 视频样式中的：position:absolute；这是让视频相对于父级div生成绝对定位；
- z-index：-9999；这是让视频在堆叠顺序的最底层，作为背景；
- object-fit：fill；视频完全填充到div中的关键！！！！
- 父级设置样式position:absolute 生成相对定位的元素，相对于其正常位置进行定位。
视频其他小属性
- muted 静音播放
- autoplay=autoplay；打开时自动播放；
- loop=loop；循环播放
- constrol 不显示视频播放框
最终效果：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>视频背景网页</title>
<style type="text/css">
.video_back {
/*设置视频最小宽度和高度*/
/*min-width: 100%;
min-height:100%;*/
width: 100% !important;
height: 100%;
/*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。可以根据实际情况修改*/
position: absolute;
/*这里我试了一下好像只要是矩形的四个角的的点都行,也就是说right:0;bottom:0;也可以*/
left: 0;
top: 0;
/*将视频放在元素的堆叠顺序最底层，以防覆盖其他东西*/
z-index: -9999;
/*被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。*/
object-fit: fill;
#parent{
.wen {
font-size: 30px;
color: #fff;
</style>
</head>
<div class="parent" style="width:1920px;height:1080px;">
autoplay autoplay如果出现该属性，则视频在就绪后马上播放。
controls controls如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload
如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url要播放的视频的 URL。
width pixels设置视频播放器的宽度。
height pixels设置视频播放器的高度。-->
<video class="video_back" src="/img/yundun.mp4" muted autoplay="autoplay" loop="loop">
您的浏览器不支持
</video>
<div class="wen">这是视频的上浮文字</div>
</body>
</html>
需求：视频在一个div中自动播放并作为背景，该视频必须完全填充在该div中，视频不能溢出div，HTML中加入视频很简单加一个<video></video>即可现在要设置视频为背景，上层还有图片、文字、等；视频width、height大小和所存放视频的div设置的width、height大小不同，视频可能会出现不是理想的效果比如：这时视频wid...
通过元素自身属性控制
在HTML5中，经常会通过为video元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面的布局不产生变化。
通过元素自身属性控制
例：加载一个视频并设置视频尺寸宽为200、高为300。
注意：当不设置大小时，默认为视频的大小
通过元素自身属性控制
<video width=“200" height="300" src="video/pian.mp4" controls>
浏览器不支持video标签</video>
通过CSS改变视频宽高
通过CSS改变视频宽高
例：加载一个视频使用CSS设置视频的宽为400，高为300。
基本语法格式
<style>
video{
width:400px;
height:300px;
</style>
</head>
<video src="video/pian.mp4" controls>
浏览器不支持video标签</video>
</body>
通过CSS改变视频宽高
Html中如何自定义Video视频流显示的长宽比
首先，这个问题是之前课题组有需要控制显示视频流的长宽比，更严格者需要针对双目摄像头裁切一半视频显示在网页上，期间找了很多的网上的解决办法，发现都没有人做过，大部分解决思路利用Video标签的style属性来修改宽和高，可是这根本无法解决问题，最后借鉴于Canvas标签可以画图的功能，可以通过将视频流显示在画布上，逐帧显示，通过控制画布的长宽比即可自定义视频流的长宽比，话不多说就看如下如何操作。
具体Video标签的功能就不做过多介绍啦，就是可以使用Vi
在 HTML5 中，可以使用 `<video>` 标签来嵌入视频，并使用 `source` 元素来指定视频的来源和类型。为了让 iOS 和 Android 设备都能播放视频，可以在 `source` 元素中指定多个视频的来源和类型，例如：
```html
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
在上面的例子中，我们指定了三个不同格式的视频文件，分别是 MP4、WebM 和 Ogg。当浏览器无法播放第一个视频时，会尝试播放第二个视频，以此类推。
需要注意的是，不同的设备和浏览器支持的视频格式可能不同，因此需要根据实际情况来选择合适的视频格式。同时，还需要注意视频文件的大小和加载速度，以避免影响用户体验。
