提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

网页背景视频的实现

实现 视频
2023-09-11 14:14:38 时间

先放上腾讯官网的简便源码：

 

视频背景时，要注意最重要的一个点：

蒙版是否遮盖住了视频控件（右击）

 

 

 

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" content="ie=edge">
 8     <link rel="stylesheet" href="./index.css">
 9     <title>Document</title>
10 </head>
11 
12 <body>
13     <div class="wrap head_wrap_index">
14 
15         <div class="banner_wrap">
16             <div class="flexslider">
17                 <ul class="slides">
18                     <li class="slide-planet" data-thumb-alt="" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;">
19                         <div class="text text1">赋能你我 连接未来</div>
20                     </li>
21                     <li class="slide-video flex-active-slide" data-thumb-alt="" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;">
22                         <div class="bg"></div>
23                         <video src="https://www.tencent.com/video/video1.mp4" loop autoplay preload></video>
24                         <div class="mask"></div>
25                         <div class="logo"></div>
26                         <div class="text text2">青春无畏 冲动不止</div>
27                     </li>
28                 </ul>
29             </div>
30         </div>
31 
32 
33         <div class="main main_index">
34             <div class="ok">
35                 1111gdfsagas
36             </div>
37         </div>
38 
39 
40     </div>
41     </div>
42 
43 
44 </body>
45 
46 </html>

 

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>

 

 

 

 

相关文章