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

最终看下效果:

填满窗口

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

Xcelsius系列的1——初识动态仪表盘

今天是Xcelsius系列的第一篇——初识动态仪表盘。 该案例将会讲解一个简单的电信公司月度业务分析数据模型,通过本案例你可以简单的了解水晶易表中的图表部件(柱...

31650
来自专栏代码GG之家

一波开源库来袭

一波开源库来袭 最近在做MVVM的教程,同时在github上闲逛,发现了一些好的开源库,于是乎推荐给大伙了。 1 SmallChart图表库 SmallChar...

21850
来自专栏hrscy

Unity地形基础

![Uploading 2016-05-02_20-09-56_318489.png . . .]](http://upload-images.jianshu....

59120
来自专栏Python中文社区

高阶爬虫实战:破解极验滑动验证码

今天给大家带来的是极验验证码的selenium破解之法,是不是有点小激动呢,小伙伴们等不及了,让我们赶紧直入主题吧。

73360
来自专栏Web 开发

2014年CSS报告

国外有人把Alex的TOP1000的CSS给爬了一遍,然后做了一些统计,蛮有意思的。

11000
来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9 人机界面指南(五):图标与图形设计 - 腾讯ISUX

17430
来自专栏天天P图攻城狮

例说 Constraint Layout:初探

谷歌的墙裂推荐,标志着 CL 布局的技术已经发展地成熟了,之前还在持观望态度的我们,是时候来深入了解一下这个 Android 布局的终极武器了。

49210
来自专栏进步博客

创建高效media queries的七个好习惯

从最小屏幕开始,逐渐扩大窗口,当效果丑陋不堪(like shit)时,此处就是breakpoint。

7420
来自专栏腾讯社交用户体验设计

你离高效制作动画只差一篇文章的距离

17220
来自专栏杨俊标的专栏

CSS 路径动画工具的诞生

每当重构页面的时候,除了设计师精致的设计稿,还需要在页面这个蛋糕上放上一个樱桃,无论蛋糕多么美味,但樱桃的点缀却更容易吸引住顾客的目光,对,就是那些细微的动画....

66600

扫码关注云+社区

领取腾讯云代金券