用Video播放视频，视频能自适应屏幕大小，但是它的Poster（海报封面）继承了原尺寸比例，无法自动缩放或拉伸，不得技巧的话，很难处理。
普通居中
现在给出两种方案：
一、模拟Poster法
如果尝试css控制不了Poster的话，那只好换个角度来实现——模拟Poster，我们在Video外面包一个div，div的背景图为Poster的图片，但设置为全屏拉伸的样式，部分代码片段如下：
<div class="fullscreen-bg" [style.background]="item.background">
<video #myMedia [vgMedia]="myMedia" class="video-js vjs-default-skin vjs-fluid vjs-poster" height="400" preload="auto"
poster="{{item.cover}}"
crossorigin playsinline webkit-playsinline>
<source *ngFor="let cItem of item.medias" src="{{cItem.src}}" type="video/mp4">
</video>
</div>
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图片：
<div class="fullscreen-bg" [style.background]="item.background">
<video #myMedia [vgMedia]="myMedia" class="video-js vjs-default-skin vjs-fluid vjs-poster" height="400" preload="auto"
poster="../assets/imgs/cover.png"
crossorigin playsinline webkit-playsinline>
<source *ngFor="let cItem of item.medias" src="{{cItem.src}}" type="video/mp4">
</video>
</div>
二、css大法
直接使用下面样式即可，是不是很简单很惊喜？
video{
width: 100%;
height: 100%;
object-fit: fill;
}
最终看下效果：
填满窗口
此文仅起抛砖引玉作用，细节有兴趣自行再摸索或微调。
