使用視頻作為網(wǎng)頁(yè)背景很酷，但也很困難。 CSS 中的background-image 屬性只能使用圖像、SVG、顏色或漸變。但是從網(wǎng)站制作技術(shù)的角度來(lái)說(shuō)，我們可以偽造一個(gè)效果，讓視頻作為背景出現(xiàn)在其他HTML元素的后面。這里的難點(diǎn)在于視頻會(huì)填滿(mǎn)整個(gè)瀏覽器頁(yè)面，并響應(yīng)瀏覽器窗口大小的變化。

觀(guān)看演示1

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

在手工實(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)關(guān)閉聲音；事實(shí)上，視頻最好不要有聲音。 （您可以在頁(yè)面上放置一個(gè)按鈕來(lái)控制聲音。）

背景視頻要有替代圖片，當(dāng)瀏覽器不支持此HTML5技術(shù)和視頻格式時(shí)，用圖片代替。在等待加載背景視頻時(shí)，還應(yīng)使用背景圖像占位符。對(duì)于一些不支持自動(dòng)播放視頻的移動(dòng)設(shè)備，也應(yīng)該使用圖片代替。

視頻的長(zhǎng)度很重要：如果太短，顯然會(huì)重復(fù)播放（背景視頻通常會(huì)重復(fù)播放），如果太長(zhǎng)，則會(huì)成為劇情敘述。如果是這樣，該視頻應(yīng)該單獨(dú)在頁(yè)面上播放。我建議視頻長(zhǎng)度在12-30秒之間。

帶寬是個(gè)大問(wèn)題。視頻的尺寸要小，盡量壓縮。同時(shí)需要在不同尺寸的設(shè)備上自動(dòng)適配屏幕尺寸。如果可能，應(yīng)使用JavaScript 控件為不同的屏幕尺寸加載不同分辨率的背景視頻。背景視頻最好小于5M，小于500K就更好了。

上面提到的幾種情況大家一定要清楚，下面我們來(lái)看一下技術(shù)實(shí)現(xiàn)的細(xì)節(jié)。

CSS代碼

使用代碼方法video在HTML5中播放視頻：

注意：此處視頻格式的排列順序很重要，因?yàn)樵谀承┌姹镜墓雀铻g覽器中，如果將.webm 格式的視頻放在其他視頻的后面，則該視頻將無(wú)法播放。

我們使用視頻的第一幀圖像作為視頻的封面圖像，這樣一旦加載了背景視頻，我們就可以看到從圖像到背景視頻的平滑過(guò)渡。

如何將視頻擴(kuò)展到全屏：

視頻#bgvid {

固定位置：右： 0；底部： 0；

最小寬度： 100%；最小高度： 100%；

寬度： 自動(dòng)； height: 自動(dòng)； z-index: -100;

background: url(polina.jpg) 不重復(fù)；

背景尺寸： 封面；

}

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

標(biāo)記（IE8/6 除外）。對(duì)于這些瀏覽器，我們使用background-image 來(lái)彌補(bǔ)對(duì)它們的支持不足，使用的圖像是視頻的封面圖。

您可能會(huì)發(fā)現(xiàn)在您的移動(dòng)設(shè)備上，

標(biāo)記不能縮放到全屏，因?yàn)檫@些設(shè)備的屏幕縱橫比限制了視頻的擴(kuò)展。我將在以后的文章中繼續(xù)探討這個(gè)問(wèn)題。

IE 8上的視頻后臺(tái)技術(shù)問(wèn)題

不僅IE8無(wú)法識(shí)別

標(biāo)簽，它不能識(shí)別所有HTML5 標(biāo)記，這是一個(gè)問(wèn)題，對(duì)于IE8，我們至少讓備用背景圖像顯示出來(lái)。為此，我們需要兩件事：一行JavaScript 代碼和一條CSS 條件注釋語(yǔ)句。

在你的CSS 代碼中做如下聲明讓IE 知道

視頻{ display: 塊； }

有了這段代碼，IE8至少可以識(shí)別

標(biāo)記，背景圖像可以正確顯示。

使用JavaScript 的視頻背景

雖然使用HTML5/CSS3實(shí)現(xiàn)視頻背景比使用JavaScript要好，但值得一提的是，有一些jQuery插件和JavaScript工具包也可以實(shí)現(xiàn)視頻背景的效果。

綜上所述

如果在網(wǎng)站上有視頻背景會(huì)很酷，但“能力越大責(zé)任越大”，請(qǐng)謹(jǐn)慎使用。

我們專(zhuān)注高端建站，小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類(lèi)API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿(mǎn)意為止，多一次對(duì)比，一定讓您多一份收獲！