video设置封面全屏自适应

作者: 明眸yh | 来源:发表于2020-12-11 18:43 被阅读0次

video使用poster设置封面图，但是图片比例不合适的，容易出现空白，影响页面的美观。

下面小程序和h5两个方面解决以上问题：（亲测有效）

<video style="height:420rpx;width:100%;" objectFit="cover" controls="{{true}}" src="{{infoData.video_url}}" poster="{{infoData.img}}"></video>

<video :src="detailData.video_url" style="object-fit:cover;" :poster="detailData.img" controls="controls" width="100%"></video>

效果如下图:

这样封面图片就铺满整个video标签了，图片也不会变形，更多object-fit相关属性这里不多介绍，想要了解的可以自行学习。

video设置封面全屏自适应
video使用poster设置封面图，但是图片比例不合适的，容易出现空白，影响页面的美观。下面小程序和h5两个方...
5.设置自适应全屏背景图
设置自适应全屏背景图
【H5】video兼容性问题以及解决对策
一：设置playsinline不全屏播放二：设置 x5videoplayerfullscreen 全屏方式...
textarea 和video同时存在&textarea 遮挡键
主要问题：小程序textarea层级最高，和video同时存在时，video全屏textarea会穿透，设置全屏不...
解决HTML5 Video标签poster无法自适应video大
在做H5视频播放，Video标签设置poster属性后，图片无法自适应Video大小，如下给Video标签设置 ...
解决HTML5 Video标签poster无法自适应video大
在做H5视频播放，Video标签设置poster属性后，图片无法自适应Video大小，如下给Video标签设置 ...
解决HTML5 Video标签poster无法自适应video大
在做H5视频播放，Video标签设置poster属性后，图片无法自适应Video大小，如下最后给Video标签设...
视频设置封面
小程序设置视频封面有两种方案，效果是一样的1、video组件设置poster，但前提是：video的control...
1月14日
vue 如何自适应占满全屏
Video里的poster填满窗口的方案
用Video播放视频，视频能自适应屏幕大小，但是它的Poster（海报封面）继承了原尺寸比例，无法自动缩放或拉伸，...