网页嵌入视频背景(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 条 |