html5视频video不全屏播放

最近项目用到了html5 的video 视频播放。但是视频在我们的div 中居然是左右占满，上下居中的。
这效果如图：
在这里插入图片描述
丑不拉几的。效果也不好。满心的纠结啊。
怎么办了。我们通过css 样式进行解决

		<div class="spoy" >
				<!-- 合作伙伴1y -->
						  <video class ="video"  loop="loop" autoplay="autoplay" controls>
			          <source src="mov_bbb.mp4" type="video/mp4">
			          <source src="mov_bbb.ogg" type="video/ogg">
			          Your browser does not support HTML5 video.
			        </video>
				</div>

	.video{
    
    width: 100% ;height: 100%; object-fit: fill;}

在这里插入图片描述

在这里插入图片描述
上面的loop的属性为自动播放video视频

在这里我们用到了object-fit （image,video）自适应

替换元素
        其内容不受CSS视觉格式化模型（中文释义参见这里）控制的元素，比如image, 嵌入的文档(iframe之类)或者applet。比如，img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的html文档。
        CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object, video, textarea, input也是替换元素，audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。
为何需要object-position/object-fit?
        适配响应式布局

.fill {
    
     object-fit: fill; }
.contain {
    
     object-fit: contain; }
.cover {
    
     object-fit: cover; }
.none {
    
     object-fit: none; }
.scale-down {
    
     object-fit: scale-down; }

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

启发的代码如下：

h2 {
    
    
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}
 
div {
    
    
  width:302px;
  height:202px;
  border:1px solid #000;
}
 
.narrow {
    
    
  width: 100px;
  height: 150px;
  margin-top: 10px;
}
 
.fill {
    
    
  object-fit:fill;
}
 
img{
    
    
  width:100%;
  height:100%;
}
 
.contain {
    
    
  object-fit: contain;
}
 
.cover {
    
    
  object-fit: cover;
}
 
.none {
    
    
  object-fit: none;
}
 
.scale-down {
    
    
  object-fit: scale-down;
}

<html>
<head>
	<link rel="stylesheet" type="text/css" href="object-fit.css">
</head>
<body>
<div>
  <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1526212574&di=d7da79bec27769a727d6dbc7c4668d4d&src=http://img1.cache.netease.com/catchpic/C/C7/C7F6DDD628AF0834C677072B06BBE2C8.jpg" alt="MDN Logo" 
	class="contain"/>
</div>
</body>
</html>

html5视频video不全屏播放

猜你喜欢