網頁背景視頻的實現
阿新 • • 發佈：2018-04-10
右擊 代碼實現 latex over right 註意 posit otto net
先放上騰訊官網的簡便源碼：
視頻背景時，要註意最重要的一個點：
蒙版是否遮蓋住了視頻控件（右擊）
HTML：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible"
CSS：
1 body,
2 h1,
3 h3,
4 h4,
5 li,
6 ol,
7 p,
8 ul {
9 margin: 0;
10 padding: 0;
11 }
12
13 video {
14 display: inline-block;
15 *display: inline;
16 *zoom: 1;
17 }
18
19 .banner_wrap {
20 height: 624px;
21 margin-bottom: 60px;
22 background-color: #0457b7;
23 *margin-top: -84px;
24 }
25
26 .flexslider .slides>li {
27 height: 685px;
28 }
29
30 .flexslider .slide-video .mask {
31 width: 100%;
32 height: 685px;
33 position: absolute;
34 left: 0;
35 top: 0;
36 background: #000;
37 opacity: .4;
38 filter: alpha(opacity=40);
39 }
40
41 .flexslider .slide-video .logo {
42 width: 296px;
43 height: 48px;
44 position: absolute;
45 left: 50%;
46 top: 50%;
47 margin-left: -148px;
48 margin-top: -123px;
49 background: url(https://www.tencent.com/images/index/banner_logo.png) no-repeat;
50 cursor: pointer;
51 }
52
53 .flexslider .slide-video video {
54 position: absolute;
55 left: 50%;
56 margin-left: -960px;
57 }
58
59 .flexslider .slide-video .bg {
60 width: 100%;
61 height: 685px;
62 position: absolute;
63 left: 0;
64 top: 0;
65 background: url(https://www.tencent.com/images/index/banner_video_img.jpg) center center no-repeat;
66 }
67
68 .banner_wrap {
69 overflow: hidden;
70 background: #0457b7;
71 }
72
73
74 /* 視頻文本 */
75
76 .banner_wrap .text {
77 width: 100%;
78 height: 135px;
79 position: absolute;
80 left: 0;
81 top: 50%;
82 margin-top: -67.5px;
83 text-align: center;
84 color: #fff;
85 font-size: 90px;
86 cursor: default;
87 }
88
89 .ok {
90 text-align: center;
91 }
常規的代碼：
1.需要布局（控制視頻的高度）
2.右鍵無法選中（蒙版）
3.文字排版（float還是before）
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 .background-video {
11 position: fixed;
12 top: 50%;
13 left: 50%;
14 /* 采用max-width可以在不同設備顯示全部內容 */
15 min-width: 100%;
16 min-height: 100%;
17 z-index: -100;
18 transform: translateX(-50%) translateY(-50%);
19 /* 視頻無法播放時，顯示圖片 */
20 background: url(‘banner_video_img.jpg‘) no-repeat;
21 /* 顯示圖片擴展全屏*/
22 background-size: cover;
23 }
24 </style>
25 </head>
26
27 <body>
28 <!-- video poster視頻無法播放時，顯示圖片 -->
29 <video autoplay loop poster="" class="background-video">
30 <!-- 源碼可以填寫多個 -->
31 <source src="" type="video/webm">
32 <source src="./video1.mp4" type="video/mp4"> </video>
33 </body>
34
35 </html>
CSS代碼實現的常規代碼：
2018-4-9|有缺陷（無法正常響應式屏幕大小）
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 body, 11 html { 12 margin: 0; 13 padding: 0; 14 } 15 16 .fullscreenvideo { 17 position: absolute; 18 top: 50%; 19 left: 50%; 20 max-width: 100%; 21 min-height: 100%; 22 width: auto; 23 height: auto; 24 z-index: -100; 25 -webkit-transform: translateX(-50%) translateY(-50%); 26 transform: translateX(-50%) translateY(-50%); 27 -webkit-transition: 1s opacity; 28 transition: 1s opacity; 29 } 30 31 .videocontainer { 32 position: fixed; 33 width: 100%; 34 /*高度70% */ 35 height: 70%; 36 overflow: hidden; 37 z-index: -100; 38 } 39 40 .videocontainer:before { 41 content: ""; 42 position: absolute; 43 width: 100%; 44 height: 100%; 45 display: block; 46 z-index: -1; 47 top: 0; 48 left: 0; 49 background: rgba(25, 29, 34, .65); 50 } 51 </style> 52 </head> 53 54 <body> 55 <div class="videocontainer"> 56 <video class="fullscreenvideo" poster="" playsinline="" autoplay muted loop> 57 <source src="./apliy.mp4" type="video/mp4"> 58 </video> 59 </div> 60 </body> 61 62 </html>
網頁背景視頻的實現