Video里的poster填满窗口的方案

用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;
}

最终看下效果：

填满窗口

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