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

觀看演示1：點我

視訊作為網頁背景的限制因素

在動手編碼實現前，視訊作為網頁背景的有些問題我們要先考慮清楚：

1、並不是因為技術上可行你就可以任意使用：作為背景的視訊內容必須能增強頁面內容的感染力，而不是因為漂亮或技術上很酷就使用它。

2、作為背景的視訊應該設定為自動播放，而預設狀態下應該是關閉聲音；事實上，視訊裡面最好不含聲音。(你可以在頁面上放置一個控制聲音的按鈕。)

3、背景視訊應該有個替代圖片，當瀏覽器不支援這種HTML5技術、視訊格式時用圖片替代。在等待背景視訊載入的過程中也應該使用背景圖片佔位。而對於一些手機移動裝置不支援視訊自動播放，也應該使用圖片替代。

4、視訊長度很重要：太短了會明顯感到重複播放(背景視訊通常情況是重複播放的)，太長就變成了情節敘事，如果這樣，這段視訊應該單獨放到頁面上播放。我建議視訊的長度應該是12-30秒之間。
頻寬是個大問題。視訊的體積應很小，儘量的壓縮。同時，它需要在不同尺寸裝置上自動的適應螢幕大小。如果有可能，應該使用JavaScript控制對不同的螢幕大小載入不同解析度的背景視訊。背景視訊最好小於5M，如果你小於500K，那是更好。

對上面說的這些情況心裡要有數，下面我們來看看技術實現上的細節。

CSS程式碼

使用HTML5裡播放視訊的程式碼方法視訊：

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

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

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

</video>

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

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

讓視訊擴充套件到全屏的方法：

video#bgvid { 
  position: fixed; 
  right: 0; bottom: 0;
  min-height: 100%;
  width: auto; height: 
  auto; z-index: -100;
  background: url(polina.jpg) no-repeat;
  background-size: cover; 
}

一些老式的瀏覽器無法播放這種格式的視訊，但它們仍然識別標記(除了IE8/6)。對於這些瀏覽器，我們使用了background-image來彌補它們的不支援，使用的圖片就是視訊的封面圖片。

你可能會發現，在手機裝置上，標記是無法擴充套件到全屏的，因為這些裝置的螢幕長寬比限制了視訊的擴充套件。我在以後的文章裡了會繼續探討這個問題。

視訊背景技術在 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實現視訊背景

儘管使用HTML5/CSS3實現視訊背景要比使用JavaScript好一些，但不妨說一下，有一些jQuery外掛和JavaScript工具包也能達到視訊背景的效果。下面是幾個演示：

觀看演示2：點我

結論

如果一個網站上使用了視訊背景，那會變得相當的酷，但是，“能力越大，責任越大”，請審慎明智的使用。