要不要实现动态视频作为后台的首页？快来一起学习吧。本文将带您了解H5动态视频背景。
先在网上找一个清晰的视频下载下来，最好是MP4格式的；下载后，我们创建一个新的html文件来编写代码:
Html代码:
<video id="v1" autoplay loop muted> <source src="./video2.mp4" type="video/mp4" /></video>
一个视频标签被包装，source代表源文件，autoplay属性为自动播放，loop代表循环播放，muted代表静音播放；
如果没有添加autoplay属性，则无法自动播放，页面会黑屏显示；
Css代码:
*{ ***rgin: 0px; padding: 0px; } video{ position: fixed; right: 0px; bottom: 0px; min-width: 100%; min-height: 100%; height: auto; width: auto; /*加滤镜*/ /*filter: blur(15px); //背景模糊设置 */ /*-webkit-filter: grayscale(100%);*/ /*filter:grayscale(100%); //背景灰度设置*/ z-index:-11} source{ min-width: 100%; min-height: 100%; height: auto; width: auto; }web前端开发学习Q-q-u-n： 767中273后102 ，分享学习的方法和需要注意的小细节
Css代码主要是定位放大达到全屏播放的效果，主要是设置视频的宽度和高度，别忘了给z-index一个值，这样可以放在最下面，只要小于0，没有影响；
这样我们的动态视频背景就完成了。如果要设置播放速度，可以添加js代码(视频标签加ID = "v1 "属性):
var video= document.getElementById(‘v1‘);video.playbackRate = 1.5;
那么如果我们想在页面上添加内容呢？
<video id="v1" autoplay loop muted> <source src="./video2.mp4" type="video/mp4" /></video> <h1 style="color:white">123465</h1>
对，加在视频标签外面，然后我们的效果图是这样的(因为博客对图片大小有限制，截屏时间不是很长)
本文来自我要无比强大投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/549029.html
微信扫一扫 
