第一步、HTML中添加视频标签
使用video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放。
<video autoplay muted loop class="bg_fixed">
<source src="img/V-154485-5ED2BB75.mp4" type="video/mp4" />
您的浏览器不支持 video 标签。
</video>
第二步、添加CSS属性,让视频适应屏幕
.bg_fixed{
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
transition: 1s opacity;
}
第三步、使用JS控制视频速度文章来源:https://www.toymoban.com/news/detail-513375.html
利用video的playbackRate属性来控制video的播放速度文章来源地址https://www.toymoban.com/news/detail-513375.html
<script>
var video= document.querySelector('.bg_fixed');
video.playbackRate = 0.5;
</script>
到了这里,关于将视频设置为网页的背景的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!