<p style="margin-top: 0px; margin-bottom: 0px; padding: 3px 0px; outline: none; line-height: 30px; color: rgb(34, 34, 34); font-family: tahoma, arial, "Microsoft YaHei"; font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255);">想在你的网页首页中全屏播放一段视频吗？而这段视频是作为网页的背景，不影响网页内容的正常浏览。那么我告诉你有一款Javascript库正合你意，它就是Bideo.js。</p><p style="margin-top: 0px; margin-bottom: 0px; padding: 3px 0px; outline: none; line-height: 30px; color: rgb(34, 34, 34); font-family: tahoma, arial, "Microsoft YaHei"; font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255);"><strong>特性</strong></p><p style="margin-top: 0px; margin-bottom: 0px; padding: 3px 0px; outline: none; line-height: 30px; color: rgb(34, 34, 34); font-family: tahoma, arial, "Microsoft YaHei"; font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255);">自动调整：Bideo.js可以根据当前浏览器窗口的大小自动调整视频尺寸，当浏览器窗口调整时，它会自适应窗口尺寸，移动端、PC端都能自动调整，使视频作为背景并全屏展示。</p><p style="margin-top: 0px; margin-bottom: 0px; padding: 3px 0px; outline: none; line-height: 30px; color: rgb(34, 34, 34); font-family: tahoma, arial, "Microsoft YaHei"; font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255);">覆盖：视频作为网页背景后，我们可以任意在视频上层放置任意HTML内容。</p><p style="margin-top: 0px; margin-bottom: 0px; padding: 3px 0px; outline: none; line-height: 30px; color: rgb(34, 34, 34); font-family: tahoma, arial, "Microsoft YaHei"; font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255);">视频封面：页面打开时，视频可能需要几秒钟才能加载完，那么我们可以设置一张图片作为视频的封面，等加载完再播放。</p><p style="margin-top: 0px; margin-bottom: 0px; padding: 3px 0px; outline: none; line-height: 30px; color: rgb(34, 34, 34); font-family: tahoma, arial, "Microsoft YaHei"; font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255);"><strong>HTML</strong></p><p style="margin-top: 0px; margin-bottom: 0px; padding: 3px 0px; outline: none; line-height: 30px; color: rgb(34, 34, 34); font-family: tahoma, arial, "Microsoft YaHei"; font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255);">在你的页面body中加入如下HTML代码，很显然， <video> 标签是用来加载视频的，属性 loop 是指循环播放视频， muted 是指静音模式，即音量为0。 #video_cover 是默认的视频封面。 #overlay 是遮罩层，所有其他页面内容在遮罩层上展示。</p><pre class="brush:html;toolbar:false"><div id="container"><br/> <video id="background_video" loop muted></video><br/> <div id="video_cover"></div><br/> <div id="overlay"></div><br/><br/> <div id="video_controls"><br/> <span id="play"><br/> <img src="play.png"><br/> </span><br/> <span id="pause"><br/> <img src="pause.png"><br/> </span><br/> </div><br/><br/> <section id="main_content"><br/> <div id="head"><br/> <h1>HTML5轻松实现全屏视频背景-Bideo.js</h1><br/> <p class="sub_head">一个可以轻松添加页面全屏背景视频的Javscript库</p><br/> <p class="info">(稍等片刻，视频加载需要一点点时间.)</p><br/> </div><br/> </section><br/></div></pre><p style="margin-top: 0px; margin-bottom: 0px; padding: 3px 0px; outline: none; line-height: 30px; color: rgb(34, 34, 34); font-family: tahoma, arial, "Microsoft YaHei"; font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 1em;">我们还添加了 #video_controls ，这个是用来控制视频播放与暂停的，适用于手机移动端。最后你可以在接下来的 section 中添加任意你想展示的HTML内容了。</span></p><p style="margin-top: 0px; margin-bottom: 0px; padding: 3px 0px; outline: none; line-height: 30px; color: rgb(34, 34, 34); font-family: tahoma, arial, "Microsoft YaHei"; font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255);"><strong>CSS</strong></p><p style="margin-top: 0px; margin-bottom: 0px; padding: 3px 0px; outline: none; line-height: 30px; color: rgb(34, 34, 34); font-family: tahoma, arial, "Microsoft YaHei"; font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255);">CSS也是比较关键，最需要关注的是 #container 和 #background_video 的设置。以下css代码直接拿去无需解释：</p><pre class="brush:css;toolbar:false">* {<br/> margin: 0; padding: 0;<br/>}<br/><br/>html, body {<br/> width: 100%;<br/> height: 100%;<br/> overflow: hidden;<br/>}<br/><br/>#container {<br/> overflow: hidden;<br/> position: absolute;<br/> top: 0; left: 0; right: 0; bottom: 0;<br/> height: 100%;<br/>}<br/><br/>#background_video {<br/> position: absolute;<br/><br/> top: 50%; left: 50%;<br/> transform: translate(-50%, -50%);<br/><br/> object-fit: cover;<br/> height: 100%; width: 100%;<br/>}<br/><br/>#video_cover {<br/> position: absolute;<br/><br/> width: 100%; height: 100%;<br/><br/> background: url('video_cover.jpeg') no-repeat;<br/> background-size: cover;<br/> background-position: center;<br/>}<br/><br/>#overlay {<br/> position: absolute;<br/> top: 0; right: 0; left: 0; bottom: 0;<br/> background: rgba(0,0,0,0.5);<br/>}<br/></pre><p style="margin-top: 0px; margin-bottom: 0px; padding: 3px 0px; outline: none; line-height: 30px; color: rgb(34, 34, 34); font-family: tahoma, arial, "Microsoft YaHei"; font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255);"><strong>Javascript</strong></p><p style="margin-top: 0px; margin-bottom: 0px; padding: 3px 0px; outline: none; line-height: 30px; color: rgb(34, 34, 34); font-family: tahoma, arial, "Microsoft YaHei"; font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255);">首先加载Bideo库：</p><pre class="brush:js;toolbar:false"><script src="bideo.js"></script><br/></pre><p style="margin-top: 0px; margin-bottom: 0px; padding: 3px 0px; outline: none; line-height: 30px; color: rgb(34, 34, 34); font-family: tahoma, arial, "Microsoft YaHei"; font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255);">接着实例化bideo： new Bideo() ，然后直接初始化加载，设置如下选项：</p><pre class="brush:js;toolbar:false">(function () {<br/> var bv = new Bideo();<br/> bv.init({<br/> // Video元素<br/> videoEl: document.querySelector('#background_video'),<br/><br/> // 容器元素<br/> container: document.querySelector('body'),<br/><br/> // 自适应调整<br/> resize: true,<br/><br/> // autoplay: false,<br/><br/> isMobile: window.matchMedia('(max-width: 768px)').matches,<br/><br/> playButton: document.querySelector('#play'),<br/> pauseButton: document.querySelector('#pause'),<br/><br/> // 加载视频源, 根据实际业务更换自己的视频源文件<br/> src: [<br/> {<br/> src: 'http://ak4.picdn.net/shutterstock/videos/4170274/preview/stock-footage-beautiful-girl-lying-on-the-meadow-and-dreaming-enjoy-nature-close-up-slow-motion-footage.mp4',<br/> type: 'video/mp4'<br/> },<br/> {<br/> src: 'night.webm',<br/> type: 'video/webm;codecs="vp8, vorbis"'<br/> }<br/> ],<br/><br/> // 一旦视频加载后即将视频封面隐藏<br/> onLoad: function () {<br/> document.querySelector('#video_cover').style.display = 'none';<br/> }<br/> });<br/>}());<br/></pre><div class="jb51code" style="margin: 5px 0px 0px 5px; padding: 0px; outline: none; line-height: 32px; width: 800px; overflow: hidden; clear: both; position: relative; color: rgb(34, 34, 34); font-family: tahoma, arial, "Microsoft YaHei"; font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255);"><div style="margin: 0px; padding: 0px; outline: none; line-height: 32px;"><p style="padding: 1px; outline: none; width: 800px; line-height: 32px; margin: 1em 0px !important; position: relative !important; overflow: auto !important; font-size: 1em !important;">就这样一个看起来高大上的背景视频页面就完工了，欢迎查看在线演示DEMO和下载源代码。更多有关Bideo.js的信息请查看github项目地址： <a target="_blank" href="https://github.com/rishabhp/bideo.js" style="color: rgb(66, 139, 202); text-decoration-line: none;">https://github.com/rishabhp/bideo.js</a> 。</p></div></div><p>来源：https://www.jb51.net/html5/609593.html</p>
相关文章
