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

觀看演示1

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

在手工實(shí)現(xiàn)編碼之前，我們需要考慮視頻作為網(wǎng)頁背景的一些問題：

這不僅僅是因?yàn)榧夹g(shù)上可以隨心所欲地使用它：背景視頻內(nèi)容必須增強(qiáng)頁面內(nèi)容，而不僅僅是因?yàn)樗粱蚣夹g(shù)上很酷。

背景視頻應(yīng)設(shè)置為自動播放，默認(rèn)關(guān)閉聲音；事實(shí)上，視頻最好不要有聲音。 （您可以在頁面上放置一個按鈕來控制聲音。）

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

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

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

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

CSS代碼

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

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

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

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

視頻#bgvid {

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

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

寬度： 自動； height: 自動； z-index: -100;

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

背景尺寸： 封面；

}

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

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

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

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

IE 8上的視頻后臺技術(shù)問題

不僅IE8無法識別

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

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

視頻{ display: 塊； }

有了這段代碼，IE8至少可以識別

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

使用JavaScript 的視頻背景

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

綜上所述

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

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