html5怎么把视频设置成背景

发布网友 发布时间:2022-04-22 19:00

我来回答

1个回答

热心网友 时间:2022-04-20 02:15

第一步:准备工作

            先准备好一个视频

第二步:引入视频

这里我们需要用到了video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放

<video id="v1" autoplay muted loop style="width: 100%">    <source  src="mp4/loading.mp4">

</video>

第三步:调节视频,使其适应屏幕

以上的步骤还不能满足我们的需求,这个时候我们会发现有滚动条,而且视频会遮挡我们要显示的内容,可这远远不是我们想要的结果啊,不怕,有我呢

    video{          position: fixed;          right:0;          bottom: 0;          min-width: 100%;          min-height: 100%;          width: auto;          height: auto;          z-index: -9999;          /*灰色调*/          /*-webkit-filter:grayscale(100%)*/      }

这样就OK了,-webkit-filter:grayscale(100%)为调节会色调的,同样适用于img

第四步:视频播放速度

可以利用video的playbackRate属性来控制video的播放速度,如果要让背景视频以慢速播放的话可以加上下面的javascript

<script>    var video= document.getElementById('v1');    video.playbackRate = 0.5;</script>

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com