怎么在Html5中实现首页动态视频背景

怎么在Html5中实现首页动态视频背景？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

html代码：

<video id="v1" autoplay loop muted>              <source class="lazy" data-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;                                                                  z-index:-11        }          source{              min-width: 100%;              min-height: 100%;              height: auto;              width: auto;          }

css代码主要是进行定位和放大达到全屏播放的效果，主要是对video进行宽高之类的设置，还有别忘了要给z-index给个值，让放置在底部，只要小于0都可以，没有影响；

就这样我们的动态视频背景就完成了，如果想设置播放速度，我们可以添加js代码（video标签加上id=“v1”属性）：

 var video= document.getElementById('v1');            video.playbackRate = 1.5;

那么如果我们想要添加内容到页面上怎么办呢？

<video id="v1" autoplay loop muted>              <source class="lazy" data-src="./video2.mp4" type="video/mp4"  />        </video>            <h2 style="color:white">123465</h2>

关于怎么在Html5中实现首页动态视频背景问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网行业资讯频道了解更多相关知识。