HTML中加入视频播放及调节视频大小位置等比例那些事

需求：视频在一个div中自动播放并作为背景，该视频必须完全填充在该div中，视频不能溢出div，

HTML中加入视频很简单加一个<video> </video>即可

现在要设置视频为背景，上层还有图片、文字、等；

视频width、height大小和所存放视频的div设置的width、height大小不同，视频可能会出现不是理想的效果

比如：

这时视频width和weight设置为100%，已经到达视频原有的最大尺寸，但是还无法完全覆盖我们的div，所以现在要设置视频Video的属性和其父级DIV的属性：

 .video_back {/*设置视频最小宽度和高度 这个设不设置没有什么影响 *//*min-width: 100%;min-height:100%;*//**/width: 100% !important;height: 100%;/*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。可以根据实际情况修改*/position: absolute;/*这里我试了一下好像只要是矩形的四个角的的点都行,也就是说right:0;bottom:0;也可以*/left: 0;top: 0;/*将视频放在元素的堆叠顺序最底层，以防覆盖其他东西*/z-index: -9999;/*被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。*/object-fit: fill;}#parent{position:absolute;}

几个重要的设置：

视频样式中的：position:absolute；这是让视频相对于父级div生成绝对定位；
z-index：-9999；这是让视频在堆叠顺序的最底层，作为背景；
object-fit：fill；视频完全填充到div中的关键！！！！
父级设置样式position:absolute 生成相对定位的元素，相对于其正常位置进行定位。

视频其他小属性

muted 静音播放
autoplay=autoplay；打开时自动播放；
loop=loop；循环播放
constrol 不显示视频播放框

最终效果：

源代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>视频背景网页</title><style type="text/css">.video_back {/*设置视频最小宽度和高度*//*min-width: 100%;min-height:100%;*//**/width: 100% !important;height: 100%;/*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。可以根据实际情况修改*/position: absolute;/*这里我试了一下好像只要是矩形的四个角的的点都行,也就是说right:0;bottom:0;也可以*/left: 0;top: 0;/*将视频放在元素的堆叠顺序最底层，以防覆盖其他东西*/z-index: -9999;/*被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。*/object-fit: fill;}#parent{position:absolute;}.wen {font-size: 30px;color: #fff;}</style>
</head>
<body><div class="parent" style="width:1920px;height:1080px;"><!--autoplay autoplay如果出现该属性，则视频在就绪后马上播放。controls controls如果出现该属性，则向用户显示控件，比如播放按钮。loop  loop如果出现该属性，则当媒介文件完成播放后再次开始播放。muted  muted规定视频的音频输出应该被静音。poster  URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。preload   preload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。src     url要播放的视频的 URL。width   pixels设置视频播放器的宽度。height pixels设置视频播放器的高度。--><video class="video_back" src="/img/yundun.mp4" muted autoplay="autoplay" loop="loop">您的浏览器不支持</video><div class="wen">这是视频的上浮文字</div></div>
</body>
</html>

HTML中加入视频播放及调节视频大小位置等比例那些事相关推荐

腾讯视频app怎么允许腾讯视频访问位置信息
1.首先,打开一个的腾讯视频的界面当中,点击右下角中的个人中心的选项怎么下载完整版腾讯视频到桌面_腾讯视频app怎么允许腾讯视频访问位置信息 2.点击了个人中心的选项之后,点击列表中的设置 ...
moviepy音视频开发：使用volumex调节音量大小及其花式用法
☞ ░ 前往老猿Python博文目录 ░ 一.概述音频数据的音量体现为声音的振幅,振幅越大则声音越大,具体到音频帧数据上,体现为声音的绝对值越大则振幅越大音量越大,调节音量大小的本质是调整帧数据的绝 ...
python moviepy 音量_moviepy音视频开发：使用volumex调节音量大小及其花式用法
☞ ░ 前往老猿Python博文目录 ░ 一.概述音频数据的音量体现为声音的振幅,振幅越大则声音越大,具体到音频帧数据上,体现为声音的绝对值越大则振幅越大音量越大,调节音量大小的本质是调整帧数据的绝 ...
android 设置视频音量大小,为cocos2d-x添加调节视频音量的功能(Android)
为cocos2d-x添加调节视频音量的功能(Android). 日常吐槽cocos.我想放广告的时候播放一些其他声音,这时候我希望视频先静音,但是不停止播放.等声音播放完,我再放视频声音.赫然发现,V ...
android studio视频路径,Android studio相关设置及实现存在于工程目录中的视频播放...
一:相关设置 1:主题设置 File-->Settings-->Appearance &Behavior-->Appearance-->THeme 2:Java源码的颜 ...
php怎么调节字体大小,ps中怎么调整字体大小
ps中调整字体大小的方法:首先打开ps软件:然后单击工具箱中的"字符"面板:最后在调整字体大小的下拉框中选择合适的字体大小,或者直接在属性栏中输入具体的数字来调整字体大小即可. p ...
wps怎么把字缩到最小_如何在WPS文档中快速调节字体大小
如何在WPS文档中快速调节字体大小现在越来越多的人在使用WPS的软件了,不过在习惯了使用word文档以后很难对WPS 的使用转变过来,其实WPS软件有着很多的优势,也有很多地方可以让我们办公时得心应 ...
android爬取视频播放地址,Android 视频中抓取图像 - MediaMetadataRetriever
最近在side project中遇到了需要从视频中抓取多张图片的需求.安卓已经提供了从视频获取预览图片的ThumbnailUtils, 但此类不能根据timestamp获取bitmap. 以下记录自己 ...
iOS 获取相册中视频大小
//获取视频大小 - (NSInteger) getFileSize:(NSString*) path { DLog(@"path == %@",path); NSFileMan ...

HTML中加入视频播放及调节视频大小位置等比例那些事

需求：视频在一个div中自动播放并作为背景，该视频必须完全填充在该div中，视频不能溢出div，

HTML中加入视频播放及调节视频大小位置等比例那些事相关推荐

最新文章

热门文章