video作为背景全屏铺满问题
项目中我打算使用一个MP4视频作为登录界面背景,首先在静态页面都没法显示出来,后来发现需要将视频的编码格式转换为H264的格式方能正常显示(使用格式工厂转换即可);
后又发现视频没办法铺满全屏,在不同的分辨率下会往左上角缩回来,而且还有滚动条。不像背景图片可以直接使用background-size:cover;即可搞定 ,于是百度一圈发现直接给video定位,宽高设置为自动的即可。具体代码如下所示:
video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
}
其他网友说使用 object-fit:fill;属性;也有说计算出video父级的高度和video本身的高度,再通过计算得出padding-bottom的值来,我试了没效果,使用上面的代码简单粗暴的解决了问题。
video作为背景全屏铺满问题的更多相关文章
- android设置GridView高度自适应,实现全屏铺满效果
使GridView每个item的高度自适应拉伸,达到整个GridView刚好铺满全屏的效果. public static void setGridViewMatchParent(GridView gr ...
- video自动全屏播放
video自动全屏播放 关于Screen.lockOrientation() https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockO ...
- 微信video标签全屏无法退出bug 本文系转载
安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...
- 微信video标签全屏无法退出bug
安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...
- X5内核浏览器video自动全屏解决办法-canvas
最近在做手机端上面播放视频的项目,但是在安卓上面,video的播放是脱离页面,置于最顶层的,所以带来了很多问题,为了解决这个问题,查看了多方资料,写了下面简单的demo,方便以后使用. 下面就是运用c ...
- 防止微信浏览器video标签全屏的问题
在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID" webkit-play ...
- iframe中video没有全屏按钮
HTML内联框架元素 <iframe> iframe默认不允许全屏, 如果内嵌了video那么控制条上将不显示全屏按钮, 通过添加allowfullscreen属性可以开启全屏功能. mo ...
- video 手机全屏自动播放
<video src="video.mp4" id="video" x-webkit-airplay="true" webkit-pl ...
- Android 使WebView支持HTML5 Video(全屏)播放的方法
http://blog.csdn.net/zrzlj/article/details/8050633 1)需要在AndroidManifest.xml文件中声明需要使用HardwareAcceler ...
随机推荐
- 单元测试之Fixture
声明: 作者:zhaojun 创建日期:2017-08-04 更新日期:2017-08-07 一.什么是Fixture,Fixture有什么作用,为什么需要使用Fixture # 下载 pip i ...
- springboot全局捕获异常
捕获 捕获原理,使用AOP技术,采用异常通知. 1.捕获返回json格式 2.捕获返回页面 步骤: 1.@ControllerAdvice(pasePackage="") 注释异常 ...
- nginx 项目部署
一.nginx 想必我们大多数人都是通过访问网站而开始接触互联网的吧.我们平时访问的网站服务 就是 Web 网络服务,一般是指允许用户通过浏览器访问到互联网中各种资源的服务. Web 网络服务是一种被 ...
- 制作OSGB数据索引
[干货]教你用.S3C文件制作OSGB数据索引 [干货]教你用.S3C文件制作OSGB数据索引_搜狐汽车_搜狐网 S3C是ContextCapture(原Smart 3D)的一种数据格式,.S3C格式 ...
- 【dp】 背包问题
问题一:01背包 题目: [题目描述] 一个旅行者有一个最多能装 M 公斤的背包,现在有 n件物品,它们的重量分别是W1,W2,...,Wn它们的价值分别为C1,C2,...,Cn求旅行者能获得最大总 ...
- LuoguP4233 射命丸文的笔记
题目描述 求所有\(n\)个点带标号强连通竞赛图中哈密顿回路数量的平均值. 题解 因为要求平均数,所以我们可以把分母和分子单开来算. \(n\)个点的所有竞赛图的所有哈密顿回路个数是可以求出来的,就是 ...
- cookie 和 session 的异同
cookie和session机制是web中常用的跟踪技术,用来跟踪用户的整个会话.cookie通过在客户端记录信息确定用户的身份,session通过在服务器端记录信息确定用户身份. (1)cookie ...
- 010-2 Socket套接字类型
ocket套接字类型 成员名称 说明 Dgram 支持数据报,即为固定 (通常很小) 的最大长度的无连接的. 不可靠的消息. 消息可能会丢失或重复,并且可能不按顺序抵达. 一个 Socket 类型的 ...
- LINUX 常用命令(二)
B0.用户相关配置文件 用户信息文件: /etc/passwd密码文件: /etc/shadow用户组文件: /etc/group用户组密 ...
- addEventListener解决多个window.onscroll共存的2个方法
方法1.(注意第一个和第二个的先后次序) window.onscroll=function(){console.log('第一个');} var oldMethod = window.onscroll ...