HTML5輕鬆實現全螢幕影片背景的範例

想在你的網頁首頁全螢幕播放一段影片嗎？而這段影片是作為網頁的背景，不影響網頁內容的正常瀏覽。那我告訴你有Javascript函式庫正合你意，它就是Bideo.js。

自動調整：Bideo.js可以根據當前瀏覽器視窗的大小自動調整影片尺寸，當瀏覽器視窗調整時，它會自適應視窗尺寸，行動裝置、PC端都能自動調整，使影片作為背景並全螢幕展示。

覆蓋：影片作為網頁背景後，我們可以任意在影片上層放置任意HTML內容。

影片封面：當頁面開啟時，影片可能需要幾秒鐘才能載入完，那麼我們可以設定一張圖片作為影片的封面，等到載入完再播放。

在你的頁面body中加入如下HTML代碼，很顯然， <video> 標籤是用來加載視頻的，屬性loop 是指循環播放視頻， muted 是指靜音模式，即音量為0。 #video_cover 是預設的影片封面。 #overlay 是遮罩層，所有其他頁面內容在遮罩層上展示。

 <div id=container> <video id=background_video loop muted></video> <div id=video_cover></div> <div id=overlay></div> <div id=video_controls> <span id=play> <img src=play.png> </span> <span id=pause> <img src=pause.png> </span> </div> <section id=main_content> <div id=head> <h1>HTML5輕鬆實現全螢幕視訊背景-Bideo.js</h1> <p class=sub_head>一個可以輕鬆新增頁面全螢幕背景影片的Javscript庫</p> <p class=info>(稍等片刻，影片載入需要一點點時間.)</p> </div> </section></div>

我們還添加了#video_controls ，這個是用來控制視訊播放與暫停的，適用於手機行動端。最後你可以在接下來的section 中加入任意你想展示的HTML內容了。

CSS也是比較關鍵，最需要關注的是#container 和#background_video 的設定。以下css代碼直接拿去無需解釋：

 * { margin: 0; padding: 0;}html, body { width: 100%; height: 100%; overflow: hidden;}#container { overflow: hidden; position: absolute; top: 0; left: 0; rightleft: 0; : 0; bottom: 0; height: 100%;}#background_video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; height: 100%; width: 100%;}#video_cover { position: solute ; width: 100%; height: 100%; background: url('video_cover.jpeg') no-repeat; background-size: cover; background-position: center;}#overlay { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.5);}

首先載入Bideo庫：

 <script src=bideo.js></script>

接著實例化bideo： new Bideo() ，然後直接初始化加載，設定如下選項：

 (function () { var bv = new Bideo(); bv.init({ // Video元素videoEl: document.querySelector('#background_video'), // 容器元素container: document.querySelector('body'), / / 自適應調整resize: true, // autoplay: false, isMobile: window.matchMedia('(max-width: 768px)').matches, playButton: document.querySelector('#play'), pauseButton: document.querySelector('#pause'), // 載入視訊來源, 根據實際業務更換自己的視訊來源檔src: [ { 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', type: 'video/mp4' }, { src: 'night.webm', type: 'video/webm;codecs=vp8, vorbis' } ], // 一旦影片載入後即將影片封面隱藏onLoad: function () { document.querySelector('#video_cover').style.display = 'none'; } } );}());

就這樣一個看起來高大上的背景影片頁面就完工了，歡迎查看線上示範DEMO和下載原始碼。更多有關Bideo.js的資訊請查看github專案地址： https://github.com/rishabhp/bideo.js 。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。