使用視頻作為網頁背景的技術探討[轉載自WEB駭客]

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

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

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

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