如何在网站头部添加视频海报?添加视频海报的方法(代码示例)
给网站头部添加视频海报的代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>视频海报</title> <style> *{ margin: 0; padding: 0; } #banner{ width: 100%; height: 500px; background: purple; overflow: hidden; position: relative; } #banner video{ width: 100%; position: relative; opacity: 0.6; /* 设置透明度 */ } #banner h2,h4{ position: absolute; top: 120px; left: 150px; width: 100%; text-align: left; color: #fff; line-height: 30px; } #banner h2{ top: 80px; font-size: 40px; text-decoration: underline; } </style> </head> <body> <div id="banner"> <video loop autoplay> <!-- loop循环播放,autoplay自动播放 --> <source src="video/banner.mp4"> </video> <h2>SLOW DOWN</h2> <h4>静下来<br> 携一缕清风,续一杯清茶 <br> 且听风轻云淡</h4> </div> </body> </html>
结果
以上就是如何在网站头部添加视频海报?添加视频海报的方法(代码示例)的详细内容,更多请关注教程集其它相关文章!
您可能感兴趣的文章:
如何在网站头部添加视频海报?添加视频海报的方法(代码示例)
photoshop设计冰爽洁面乳海报实例教程
photoshop淘宝化妆品海报设计实例制作教程
photoshop设计奔驰汽车宣传海报实例制作教程
photoshop设计一幅蝙蝠侠电影海报制作教程
photoshop设计一幅大鱼海棠动画片海报制作实例教程
关于HTML5中video标签浏览器兼容性增强的方案分享
关于html5中标签video播放的新解析
如何用HTML5在页面中插入可自动播放的视频
Html5 video 上传预览图片视频,设置、预览视频某秒的海报帧