网页嵌入视频背景(mp4当作banner)

2018-09-02 17:01  Read:

第一种用法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>视频播放</title>
<style>
body{ margin:0; padding:0}
.abc{    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    position: relative;
    width: 100%;
    }
</style>
</head>

<body>
<video class="abc" autoplay="" loop="" style="background-image:url(>)"><source src="video.mp4" type="video/mp4"></video>
</body>
</html>

第二种用法:

<!DOCTYPE HTML>
<html>
 <style type="text/css">  
        *{  
            margin: 0px;  
            padding: 0px;  
        }  
        video{  
            position: fixed;  
            right: 0px;  
            bottom: 0px;  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
            /*加滤镜*/  
            /*-webkit-filter: grayscale(100%);*/  
            /*filter:grayscale(100%);*/  
            z-index:-11
        }  
        source{  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
        }  
    </style>  
</head>  
<body>  
//资源格式自己进行添加  
 <video autoplay loop="loop">  
    <source src="./movie.mp4" type="video/mp4">
</video>  
<button>大家好 </button>
</body>
</html>

用户名: 密码:
匿名发表
全部评论:0