web前端入门到实战：HTML5实现首页动态视频背景

最新推荐文章于 2024-11-18 09:43:17 发布

原创

最新推荐文章于 2024-11-18 09:43:17 发布 · 2k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #web前端 #前端开发 #html #html5

本文介绍了如何使用HTML5创建动态视频背景。通过插入video标签，设置autoplay、loop和muted属性，确保视频自动、循环且无声播放。CSS用于全屏显示，通过设置z-index使其位于后台。若要调整播放速度，可以添加js代码。此外，内容可置于video标签外部，以实现视频背景与页面内容的结合。

你想实现动态视频作为背景的首页吗？来，一起来学习，本文将带你一起实现H5动态视频背景；

首先网上找一段清晰的视频下载下来，最好是MP4格式的；下载好了之后我们新建一个html文件来写代码：

html代码：

<video id="v1" autoplay loop muted>
    <source src="./video2.mp4" type="video/mp4"  />
</video>

一个video标签包裹着，source代表来源文件，autoplay属性是自动播放，loop代表循环播放，muted代表无声播放；

如果不加入autoplay属性是无法自动播放的，页面将会黑屏展示；

css代码：

*{  
    margin: 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：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

css代码主要是进行定位和放大达到全屏播放的效果，主要是对video进行宽高之

最低0.47元/天解锁文章