域名預(yù)訂/競價，好“米”不錯過

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

觀看演示1

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

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

并不是因為技術(shù)上可行你就可以任意使用：作為背景的視頻內(nèi)容必須能增強頁面內(nèi)容的感染力，而不是因為漂亮或技術(shù)上很酷就使用它。 作為背景的視頻應(yīng)該設(shè)置為自動播放，而默認狀態(tài)下應(yīng)該是關(guān)閉聲音;事實上，視頻里面最好不含聲音。(你可以在頁面上放置一個控制聲音的按鈕。) 背景視頻應(yīng)該有個替代圖片，當瀏覽器不支持這種HTML5技術(shù)、視頻格式時用圖片替代。在等待背景視頻加載的過程中也應(yīng)該使用背景圖片占位。而對于一些手機移動設(shè)備不支持視頻自動播放，也應(yīng)該使用圖片替代。 視頻長度很重要：太短了會明顯感到重復播放(背景視頻通常情況是重復播放的)，太長就變成了情節(jié)敘事，如果這樣，這段視頻應(yīng)該單獨放到頁面上播放。我建議視頻的長度應(yīng)該是12-30秒之間。 帶寬是個大問題。視頻的體積應(yīng)很小，盡量的壓縮。同時，它需要在不同尺寸設(shè)備上自動的適應(yīng)屏幕大小。如果有可能，應(yīng)該使用JavaScript控制對不同的屏幕大小加載不同分辨率的背景視頻。背景視頻最好小于5M，如果你小于500K，那是更好。

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

CSS代碼

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

<video autoplay loop poster="polina.jpg" id="bgvid">

  <source src="polina.webm" type="video/webm">

  <source src="polina.mp4" type="video/mp4">

</video>

注意：這里擺放視頻格式的順序很重要，因為有些版本的谷歌瀏覽器里，如果.webm格式的視頻放在了其他視頻后面，視頻將無法播放。

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

讓視頻擴展到全屏的方法：

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別標記(除了IE8/6)。對于這些瀏覽器，我們使用了background-image來彌補它們的不支持，使用的圖片就是視頻的封面圖片。

你可能會發(fā)現(xiàn)，在手機設(shè)備上，標記是無法擴展到全屏的，因為這些設(shè)備的屏幕長寬比限制了視頻的擴展。我在以后的文章里了會繼續(xù)探討這個問題。

視頻背景技術(shù)在 IE 8 上的問題

IE8不僅不能識別標記，它對所有的HTML5標記都不能識別，這是一個問題，對于IE8，我們至少要讓替代的背景圖片能顯示出來。為了達到這個目的，我們需要兩件事情：一行JavaScript代碼，一個CSS條件判斷注釋語句。

<!--[if lt IE 9]>

<script>

  document.createElement('video');

</script>

<![endif]-->

在你的CSS代碼里做如下的聲明，讓IE知道是一個block元素：

video { display: block; }

有了這句代碼，IE8至少能識別標記，可以正確的顯示背景圖片。

使用JavaScript實現(xiàn)視頻背景

盡管使用HTML5/CSS3實現(xiàn)視頻背景要比使用JavaScript好一些，但不妨說一下，有一些jQuery插件和JavaScript工具包也能達到視頻背景的效果。下面是幾個演示：

觀看演示2

觀看演示3

結(jié)論

如果一個網(wǎng)站上使用了視頻背景，那會變得相當?shù)目?，但是?ldquo;能力越大，責任越大”，請審慎明智的使用。

(英文：Create Fullscreen HTML5 Page Background Video.)

申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！