HTML视频背景效果

依赖CSS实现+DIv语法实现

注意，在引入css后需要在html中写入一下字段~

并在橙色标注的链接位置上 规定视频路径！

 
<video id="v1" autoplay loop muted>
      <source src="music/BG1-midq.webm" type="video/webm"  />
</video>

引入的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;  
}

第二种方法↓

使用本体div语法实现

(muted静音 Mute="" 设置音量 loop为循环次数 -1为无限循环)

<div class="v">
    <video class="f"  id="bgvid" playsinline="" autoplay muted loop="">
        <source src="https://www.w3cschool.cn/statics/demosource/movie.mp4" type="video/mp4">
    </video>
</div>

  1. 第二种方法↓