使用視頻作為網(wǎng)頁(yè)背景是件很酷的事情，但也是件困難的事情。css里的background-image屬性只能使用圖片、svg、顏色或漸變色。但從技術(shù)講，我們是可以偽造出一種效果，讓視頻以背景的角色出現(xiàn)在其它html元素后面。這其中的難點(diǎn)是視頻要填充整個(gè)瀏覽器頁(yè)面，而且要響應(yīng)瀏覽器窗口大小的變化。

視頻作為網(wǎng)頁(yè)背景的限制因素

在動(dòng)手編碼實(shí)現(xiàn)前，視頻作為網(wǎng)頁(yè)背景的有些問(wèn)題我們要先考慮清楚：

并不是因?yàn)榧夹g(shù)上可行你就可以任意使用：作為背景的視頻內(nèi)容必須能增強(qiáng)頁(yè)面內(nèi)容的感染力，而不是因?yàn)槠粱蚣夹g(shù)上很酷就使用它。

作為背景的視頻應(yīng)該設(shè)置為自動(dòng)播放，而默認(rèn)狀態(tài)下應(yīng)該是關(guān)閉聲音;事實(shí)上，視頻里面最好不含聲音。(你可以在頁(yè)面上放置一個(gè)控制聲音的按鈕。)

背景視頻應(yīng)該有個(gè)替代圖片，當(dāng)瀏覽器不支持這種html5技術(shù)、視頻格式時(shí)用圖片替代。在等待背景視頻加載的過(guò)程中也應(yīng)該使用背景圖片占位。而對(duì)于一些手機(jī)移動(dòng)設(shè)備不支持視頻自動(dòng)播放，也應(yīng)該使用圖片替代。

視頻長(zhǎng)度很重要：太短了會(huì)明顯感到重復(fù)播放(背景視頻通常情況是重復(fù)播放的)，太長(zhǎng)就變成了情節(jié)敘事，如果這樣，這段視頻應(yīng)該單獨(dú)放到頁(yè)面上播放。我建議視頻的長(zhǎng)度應(yīng)該是12-30秒之間。

帶寬是個(gè)大問(wèn)題。視頻的體積應(yīng)很小，盡量的壓縮。同時(shí)，它需要在不同尺寸設(shè)備上自動(dòng)的適應(yīng)屏幕大小。如果有可能，應(yīng)該使用javascript控制對(duì)不同的屏幕大小加載不同分辨率的背景視頻。背景視頻最好小于5m，如果你小于500k，那是更好。

對(duì)上面說(shuō)的這些情況心里要有數(shù)，下面我們來(lái)看看技術(shù)實(shí)現(xiàn)上的細(xì)節(jié)。

css代碼

使用html5里播放視頻的代碼方法視頻：

注意：這里擺放視頻格式的順序很重要，因?yàn)橛行┌姹镜墓雀铻g覽器里，如果.webm格式的視頻放在了其他視頻后面，視頻將無(wú)法播放。

我們使用視頻的第一幀圖像作為視頻的封面圖片，這樣，當(dāng)背景視頻一旦加載完成，我們可以看到很流暢的從圖片過(guò)度到背景視頻播放。

讓視頻擴(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;

}

一些老式的瀏覽器無(wú)法播放這種格式的視頻，但它們?nèi)匀蛔R(shí)別

你可能會(huì)發(fā)現(xiàn)，在手機(jī)設(shè)備上，視頻背景技術(shù)在 ie 8 上的問(wèn)題

ie8不僅不能識(shí)別在你的css代碼里做如下的聲明，讓ie知道

video { display: block; }

有了這句代碼，ie8至少能識(shí)別

使用javascript實(shí)現(xiàn)視頻背景

盡管使用html5/css3實(shí)現(xiàn)視頻背景要比使用javascript好一些，但不妨說(shuō)一下，有一些jquery插件和javascript工具包也能達(dá)到視頻背景的效果。

      結(jié)論

如果一個(gè)網(wǎng)站上使用了視頻背景，那會(huì)變得相當(dāng)?shù)目?，但是，“能力越大，?zé)任越大”，請(qǐng)審慎明智的使用。