用视频作为网页背景动态展示内容_技术知识_新闻中心

用视频作为网页背景动态展示内容

发布时间：2022-10-28 作者：管理员来源：本站浏览量（2）点赞（1）点踩（0）评论（0）收藏（0）

摘要：服务器带宽非常高的前提下用视频作为网页背景，会带来很强的视觉冲击。下面分享如何用视频作为网页背景去展示。html结构代码：视频作为网页背景

服务器带宽非常高的前提下用视频作为网页背景，会带来很强的视觉冲击。下面分享如何用视频作为网页背景去展示。

html结构代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>视频作为网页背景</title>
    <!--[if  IE ]>
    　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="intro.css ">
</head>
<body>
        <div class="text-center w-mian">
            <video autoplay loop poster="polina.jpg" id="bgvid">
                <source src="imgs/bg222.mp4" type="video/mp4">
               <!-- <source src="http://cdn.moji.com/websrc/video/video621.mp4" type="video/mp4">-->
            </video>
            <h1 >Angular JS</h1>
            <h3 style="margin-left: 20%">——<img src="imgs/favicon.ico">&nbsp<span id="w-temp">自主学习平台</span></span></h3>
            <div class=" box center-block ">
                <div class="login " >
                    <button id="wBtn" type="button" class="btn btn-danger  wBtn">开始学习</button>
                </div>
 
            </div>
        </div>
</body>
 
</html>
<script>
    $("#wBtn").click(function () {
        location.href="../index/index.html";
    })
</script>

CSS 样式代码：

body{
        background-color:gray;
        
    }
    h1{
        color:rgb(225,223,220);
        margin-top:160px;
        font-size:80px;
    }
    h3{
        color:rgb(225,223,220);
    }
    img{
        width:30px;
        height:30px;
    }
    video#bgvid {
        position: fixed; right: 0; bottom: 0;
        min-width: 100%; min-height: 100%;
        width: auto; height: auto; z-index: -100;
        background-size: cover;
    }
    .box{
        width:100%;
    }
    .wForm{
        margin-top: 10px;
    }
 
    .wBtn{
        margin-top: 20px;
        width: 200px;
        height: 80px;
        border-radius: 130px;
        opacity: 0.9;
        font-size: 26px;
    }

下载完整案例：视频作为网页背景