video图片铺满 css,Video里的poster填满窗口的方案

用Video播放视频，视频能自适应屏幕大小，但是它的Poster(海报封面)继承了原尺寸比例，无法自动缩放或拉伸，不得技巧的话，很难处理。

普通居中

现在给出两种方案：

一、模拟Poster法

如果尝试css控制不了Poster的话，那只好换个角度来实现——模拟Poster，我们在Video外面包一个div，div的背景图为Poster的图片，但设置为全屏拉伸的样式，部分代码片段如下：

poster="{{item.cover}}"

crossorigin playsinline webkit-playsinline>

css部分:

.fullscreen-bg{

height:100%;

width:100%;

background-size:cover !important;

}

因为div的background用到动态拼接，涉及到脚本安全性问题，直接在html或者ts拼接是会被屏蔽的，所以ts文件部分，要使用bypassSecurityTrustStyle处理一下：

import { DomSanitizer } from '@angular/platform-browser';

...

constructor(private sanitizer: DomSanitizer) {

}

...

item.background = this.sanitizer.bypassSecurityTrustStyle("url(" + item.cover+ ") center no-repeat");

此时效果如图：

image.png

可见，红色框选部分的Poster和背景重叠了，那我们不要它，直接把html中的Poster去掉或者赋值为空，发现连背景都不显示了，只有黑屏：

image.png

既然这样，只好给poster赋一张通明的png图片：

poster="../assets/imgs/cover.png"

crossorigin playsinline webkit-playsinline>

二、css大法

直接使用下面样式即可，是不是很简单很惊喜？

video{

width: 100%;

height: 100%;

object-fit: fill;

}

最终看下效果：

填满窗口

此文仅起抛砖引玉作用，细节有兴趣自行再摸索或微调。