Video里的poster填满窗口的方案

IT晴天

发布于 2018-08-20 10:36:28

1.8K0

发布于 2018-08-20 10:36:28

文章被收录于专栏：ionic3+ionic3+

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

最终看下效果：

填满窗口

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017.11.19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度