html5全屏视频代码,html5背景图片全屏
想在你的主页上全屏播放视频吗？并且该视频作为网页背景，不影响网页内容的正常浏览。那我就告诉你，有一个Javascript库正合你意，就是Bideo.js
特性
自动调整：Bideo.js可以根据当前浏览器窗口的大小自动调整视频大小。当浏览器窗口被调整时，它将适应窗口大小。移动端和PC端都可以自动调节，让视频可以作为背景全屏显示。
叠加：视频作为网页背景后，我们可以随意在视频顶层放置任何HTML内容。
视频封面：打开页面时，视频加载可能需要几秒钟，所以我们可以设置一张图片作为视频的封面，加载后再播放。
HTML
将以下HTML代码添加到页面正文中。显然，视频标签是用来加载视频的。属性循环是指循环播放视频，静音是指静音模式，即音量为0。#video_cover是默认的视频封面。#overlay是遮罩层，所有其他页面内容都显示在遮罩层上。
div id= container video id= background _ video 循环静音/video div id= video _ cover /div div id= overlay /div div id= video _ controls span id= play . png /span span id= pause . png /span/Section id= pause . content div id= head h1 html 5轻松实现全屏视频background-bideo . js/h1 p class= sub _ head 一个Java)/p /div /section/div我们还增加了#video_controls，用来控制视频的播放和暂停，适用于手机。最后，您可以添加想要在下一部分显示的任何HTML内容。
CSS
CSS也是关键，最需要注意的是#container和#background_video的设置。下面的css代码是直接拿过来的，没有解释：
* {边距：0；填充：0；}html，body { width:100%；身高：100%；溢出：隐藏；} #容器{ overflow:hidden；位置：绝对；top:0；左：0；右：0；底部：0；身高：100%；} #背景_视频{位置：绝对；top:50%；左：50%；transform: translate(-50%，-50%)；对象适合：封面；身高：100%；宽度：100%；}#video_cover { position:绝对；宽度：100%；身高：100%；背景：url(video_cover.jpeg )无重复；背景-尺寸：封面；背景-位置：中心；} # overlay { position:absolute；top:0；右：0；左：0；底部：0；背景：rgba(0，0，0，0.5)；}Javascript
首先加载Bideo库：
Script= bideo.js/script然后实例化bideo: newbideo()，然后直接初始化加载，设置以下选项：
(function(){ var bv=new Bideo()；bv . init({//Video element Video El:document . query selector( # background _ Video )，//container元素container:document . query selector( body )，//adaptive resize: true，//autoplay: false，is mobile:window . match media((max-width:768 px)))。matches，play button:document . query selector(# play )，Pause button:document . query selector(# Pause )，//加载视频源，根据自己的实际业务更改自己的视频源文件src:[{ src: http://ak4.picdn.net/shutterstock/videos/4170274/preview/股票-镜头-美女-躺在草地上做梦-享受自然-特写-慢动作-镜头. mp4 ，type: video/mp4 }，{ src: night.webm ，type: video/webm；Codecs=vp8，vorbis} ]，//视频加载后隐藏视频封面load:function(){ document . query selector( # video _ cover )。style.display= none} });}());就这样一个看起来很高大上的背景视频页面就完成了。欢迎查看在线演示并下载源代码。更多关于Bideo.js的信息，请查看github项目地址：https://github.com/rishabhp/bideo.js.
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。