给网站头部添加视频海报

Posted tynam

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了给网站头部添加视频海报相关的知识,希望对你有一定的参考价值。

给网站头部添加视频海报

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>视频海报</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11     #banner{
12         width: 100%;
13         height: 500px;
14         background: purple;
15         overflow: hidden;
16         position: relative;
17     }
18     #banner video{
19         width: 100%;
20         position: relative;
21         opacity: 0.6;  /* 设置透明度 */
22     }
23 
24     #banner h2,h4{
25         position: absolute;
26         top: 120px;
27         left: 150px;
28         width: 100%;
29         text-align: left;
30         color: #fff;
31         line-height: 30px;
32         
33     }
34     #banner h2{
35         top: 80px;
36         font-size: 40px;
37         text-decoration: underline;
38     }
39     </style>
40 </head>
41 <body>
42     <div id="banner">
43         <video loop autoplay>   <!-- loop循环播放,autoplay自动播放 --> 
44             <source src="video/banner.mp4">
45         </video>
46         <h2>SLOW DOWN</h2>
47         <h4>静下来<br> 携一缕清风,续一杯清茶 <br> 且听风轻云淡</h4>
48     </div>        
49 </body>
50 </html>

结果

技术分享图片

以上是关于给网站头部添加视频海报的主要内容,如果未能解决你的问题,请参考以下文章

mongoose 给文档的子数组的头部插入数据

暂停 HTML5 视频时显示海报图像或暂停按钮?

如何给wordpress网站添加百度分享按钮或悬浮窗

海报工厂之android 如何给图片添加水印和文字

不同分辨率的视频和视频预览图(海报)

如何在不使用 safari 或 iOS 上的海报的情况下获取 HTML5 视频缩略图?