动画教程：添加FLV/MP4背景

xinwen.mobi · 发表于 2 小时前

动画教程：添加FLV/MP4背景
第一步：准备视频文件
做动画的时候，想加个动态背景，这招挺管用。首先得有个视频文件，FLV或者MP4格式都行。

小建议：

视频别太大，不然网页加载慢

背景视频最好是循环播放那种

画面别太花哨，免得抢了主体内容的风头

第二步：HTML结构
写个简单的HTML结构：

html
<!DOCTYPE html>
<html>
<head>
<title>视频背景动画</title>
<style>
      样式放这里/
</style>
</head>
<body>
<div class="video-container">
      <video autoplay muted loop playsinline>
         <source src="背景视频.mp4" type="video/mp4">
         <source src="背景视频.flv" type="video/flv">
         浏览器不支持视频播放
      </video>

      <div class="内容区域">
         <h1>这是主要内容</h1>
         <p>视频在背后播放，不影响前面内容</p>
      </div>
</div>
</body>
</html>
第三步：CSS样式
让视频变成背景的关键在这里：

css
.video-container {
position: relative;
width: 100%;
height: 100vh;  占满整个屏幕高度/
overflow: hidden;
}

.video-container video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
z-index: 1;

   让视频变暗点，方便看前面文字/
filter: brightness(0.7);
}

.内容区域 {
position: relative;
z-index: 2;
color: white;
text-align: center;
padding: 20px;
top: 50%;
transform: translateY(-50%);
}
第四步：加个备用方案
不是所有浏览器都支持自动播放，得有个备用图片：

css
.video-container {
background:000 url('备用背景.jpg') no-repeat center center;
background-size: cover;
}
第五步：手机端适配
手机上看视频背景得注意点：

css
@media (max-width: 768px) {
.video-container video {
      display: none;  手机上可以隐藏视频，省流量/
}

.video-container {
      background:000 url('手机备用图.jpg') no-repeat center center;
      background-size: cover;
}
}
第六步：进阶技巧
想让效果更酷？试试这些：

加个遮罩层：

css
.遮罩 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 1.5;  在视频上面，内容下面/
}
视频加载时的动画：

css
.video-container video {
opacity: 0;
transition: opacity 1s ease-in;
}

.video-container video.loaded {
opacity: 1;
}
javascript
// 等视频加载完再显示
document.querySelector('video').addEventListener('loadeddata', function() {
this.classList.add('loaded');
});
注意事项
视频文件别用太大，压缩一下

考虑用户流量，手机端最好能关闭视频

视频内容别侵权，用自己拍的或者免费素材

加上静音属性，不然自动播放会被浏览器拦截

素材推荐
找免费视频背景素材的地方：

Pexels Videos

Coverr

Pixabay

自己用手机拍点简单素材也行

就这么简单几步，动画或者网页的背景就动起来了。效果比静态图片生动多了，试试看吧！

		自动登录	找回密码
密码			立即注册

动画教程：添加FLV/MP4背景

相关帖子