咨询,就免费赠送域名与服务器,咨询热线:400-867-6009当前位置: 主页 > 建站知识 > 网站设计知识 >
推荐内容
联系我们
电话咨询:400-867-6009
E-mail:baiyisou@qq.com

网站制作用html5的video标签实现全屏视频背景

作者/整理:微信/QQ1255009288 来源:互联网 2019-12-27

在网站项目的制作中,有时候需要在网站首页插入一段视频,并且这段视频作为网页的背景全屏播放,不影响网站的正常浏览。百易搜网站建设公司给大家分享一种用Javascript库Bideo。js来实现此效果的思路。
 
 
首先要让视频可以自动调整,用Bideo。js根据当前浏览器窗口的大小自动调整视频尺寸,当浏览器窗口调整时,它会自适应窗口尺寸,移动端、PC端都能自动调整,使视频作为背景并全屏展示。然后要实现覆盖,视频作为网页背景后,我们可以任意在视频上层放置任意HTML内容。最后就是视频封面,页面打开时,视频可能需要几秒钟才能加载完,那么我们可以设置一张图片作为视频的封面,等加载完再播放。
 
对于HTML,<video>标签用来加载视频,然后用loop属性进行循环播放。用#video_cover设置视频封面。#overlay可以设置遮罩层,所有其他页面内容在遮罩层上展示。还可以添加#video_controls,用来控制视频播放与暂停。在CSS代码中,#container和#background_video的设置是关键,需要大家特别注意。
微信