用视频做网页背景

朴灿烈づ我的快乐病毒、 2022-04-12 04:12 280阅读 0赞

1.首先你需要准备一个视频吧，然后下载Vidage的相关插件，[下载地址][Link 1]，这里是此demo用到的，可以自行去官网下载，并引入

2.构造一个容器,并放入视频资源,  
1)“metadata”: 这个preload选项的值将告诉服务端，用户依然不想马上加载音频，但需要预先获得音频的元数据信息(比如文件的大小，时长等)。如果开发者是在设计音频播放器或者需要获得音频的信息而不需要马上播放视频，则可以使用这个选项。  
2)loop循环播放、muted静音属性

这里把视频的相关样式代码放出来，关键点在于布满屏幕和透明度设置显示等

.Vidage--allow .Vidage__video {
        display: block
    }
    
    .Vidage--allow .Vidage__image {
        display: none
    }
    
    .Vidage {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1
    }
    
    .Vidage, .Vidage__video {
        min-width: 100%;
        min-height: 100%
    }
    
    .Vidage__video {
        position: absolute;
        top: 50%;
        left: 50%;
        width: auto;
        height: auto;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        display: none
    }

为了让页面好看一点，在这里加入了一点其他内容

<div class="bg_class"></div>
        <div class="text_class">
            <h1>张杰 Jason</h1>
            <p> 燃爆 帅气 正直 真诚 歌手</p>
            <p> Better Man</p>
            <a class="btn_class">start now</a>
        </div>

样式如下，因为我制作的时候同时考虑了自适应，所以样式的代码看上去比较多，自己可以选择删掉哦，

.bg_class {
        background: rgba(0, 0, 0, .6);
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0px;
        left: 0px
    }
    
    .text_class {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        text-align: center
    }
    
    .btn_class {
        background-color: #43bc71;
        border: 1px solid #2b9152;
        transition: background-color .5s ease;
        cursor: pointer;
        display: inline-block;
        width: 200px;
        padding: 20px;
        text-align: center;
        font-size: 24px;
        color: #fff;
        border-radius: 5px;
    }
    
    .btn_class:hover {
        background-color: #2b9152
    }
    
    .text_class h1 {
        font-size: 60px;
        color: #fff;
    }
    
    .text_class p {
        font-size: 30px;
        color: #fff;
        padding: 20px 0px;
    }

3.成果展示，不能提供视频，那就放几张图片感受一下吧，视频做背景，页面真的会炫酷一点哦，喜欢  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTE1MTU2_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTE1MTU2_size_16_color_FFFFFF_t_70 1]  
就这样就实现了以视频为背景，若有疑问可以在下方提问哦

[Link 1]: https://download.csdn.net/download/qq_40515156/10820342
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTE1MTU2_size_16_color_FFFFFF_t_70]: /images/20220412/2b156015aaa44bc494133370e554ce95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTE1MTU2_size_16_color_FFFFFF_t_70 1]: /images/20220412/bc89b07878f944beac81ebf114d970cb.png