【技巧】使用視訊作為網頁背景的技術探討
使用視訊作為網頁背景是件很酷的事情,但也是件困難的事情。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:點我
結論
如果一個網站上使用了視訊背景,那會變得相當的酷,但是,“能力越大,責任越大”,請審慎明智的使用。