用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");

此时效果如图：

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

既然这样，只好给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;

}

最终看下效果：