使用視頻作為網(wǎng)頁背景是件很酷的事情,但也是件困難的事情。CSS里的background-image屬性只能使用圖片、SVG、顏色或漸變色。但從
網(wǎng)站制作技術(shù)講,我們是可以偽造出一種效果,讓視頻以背景的角色出現(xiàn)在其它HTML元素后面。這其中的難點(diǎn)是視頻要填充整個瀏覽器頁面,而且要響應(yīng)瀏覽器窗口大小的變化。
觀看演示1
視頻作為網(wǎng)頁背景的限制因素
在動手編碼實(shí)現(xiàn)前,視頻作為網(wǎng)頁背景的有些問題我們要先考慮清楚:
■并不是因為技術(shù)上可行你就可以任意使用:作為背景的視頻內(nèi)容必須能增強(qiáng)頁面內(nèi)容的感染力,而不是因為漂亮或技術(shù)上很酷就使用它。
■作為背景的視頻應(yīng)該設(shè)置為自動播放,而默認(rèn)狀態(tài)下應(yīng)該是關(guān)閉聲音;事實(shí)上,視頻里面好不含聲音。(你可以在頁面上放置一個控制聲音的按鈕。)
■背景視頻應(yīng)該有個替代圖片,當(dāng)瀏覽器不支持這種HTML5技術(shù)、視頻格式時用圖片替代。在等待背景視頻加載的過程中也應(yīng)該使用背景圖片占位。而對于一些手機(jī)移動設(shè)備不支持視頻自動播放,也應(yīng)該使用圖片替代。
■視頻長度很重要:太短了會明顯感到重復(fù)播放(背景視頻通常情況是重復(fù)播放的),太長就變成了情節(jié)敘事,如果這樣,這段視頻應(yīng)該單獨(dú)放到頁面上播放。我建議視頻的長度應(yīng)該是12-30秒之間。
■帶寬是個大問題。視頻的體積應(yīng)很小,盡量的壓縮。同時,它需要在不同尺寸設(shè)備上自動的適應(yīng)屏幕大小。如果有可能,應(yīng)該使用JavaScript控制對不同的屏幕大小加載不同分辨率的背景視頻。背景視頻好小于5M,如果你小于500K,那是更好。
對上面說的這些情況心里要有數(shù),下面我們來看看技術(shù)實(shí)現(xiàn)上的細(xì)節(jié)。
CSS代碼
使用HTML5里播放視頻的代碼方法視頻:
注意:這里擺放視頻格式的順序很重要,因為有些版本的谷歌瀏覽器里,如果.webm格式的視頻放在了其他視頻后面,視頻將無法播放。
我們使用視頻的第一幀圖像作為視頻的封面圖片,這樣,當(dāng)背景視頻一旦加載完成,我們可以看到很流暢的從圖片過度到背景視頻播放。
讓視頻擴(kuò)展到全屏的方法:
video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto;z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
}
一些老式的瀏覽器無法播放這種格式的視頻,但它們?nèi)匀蛔R別標(biāo)記(除了IE8/6)。對于這些瀏覽器,我們使用了background-image來彌補(bǔ)它們的不支持,使用的圖片就是視頻的封面圖片。
你可能會發(fā)現(xiàn),在手機(jī)設(shè)備上,標(biāo)記是無法擴(kuò)展到全屏的,因為這些設(shè)備的屏幕長寬比限制了視頻的擴(kuò)展。我在以后的文章里了會繼續(xù)探討這個問題。
視頻背景技術(shù)在 IE 8 上的問題
IE8不僅不能識別標(biāo)記,它對所有的HTML5標(biāo)記都不能識別,這是一個問題,對于IE8,我們至少要讓替代的背景圖片能顯示出來。為了達(dá)到這個目的,我們需要兩件事情:一行JavaScript代碼,一個CSS條件判斷注釋語句。
在你的CSS代碼里做如下的聲明,讓IE知道
video { display: block; }
有了這句代碼,IE8至少能識別標(biāo)記,可以正確的顯示背景圖片。
使用JavaScript實(shí)現(xiàn)視頻背景
盡管使用HTML5/CSS3實(shí)現(xiàn)視頻背景要比使用JavaScript好一些,但不妨說一下,有一些jQuery插件和JavaScript工具包也能達(dá)到視頻背景的效果。
結(jié)論
如果一個網(wǎng)站上使用了視頻背景,那會變得相當(dāng)?shù)目?,但是?ldquo;能力越大,責(zé)任越大”,請審慎明智的使用。
網(wǎng)頁標(biāo)題:如何讓視頻做成網(wǎng)頁背景
本文URL:http://www.rwnh.cn/news/230336.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動網(wǎng)站建設(shè)、用戶體驗、響應(yīng)式網(wǎng)站、網(wǎng)站排名、靜態(tài)網(wǎng)站、域名注冊
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)