湖南快乐十分前直遗漏
 
    訪問新版
用戶ID/郵箱: 密 碼:
網站建設資訊 News 您目前的位置:湖南快乐十分前直遗漏 >> 網站建設資訊 >> 網頁設計 >> 一個很*酷*的思路-  

湖南快乐十分现场直播:一個很*酷*的思路-用*視頻*作為*網頁背景*(轉自站長之家)

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

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

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

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

CSS代碼

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

<video autoplay loop poster="wwwyanetcn.jpg" id="bgvid">
<source src="wwwyanetcn.webm" type="video/webm">
<source src="wwwyanetcn.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(wwwyanetcn.jpg) no-repeat;
background-size: cover;
}
一些老式的瀏覽器無法播放這種格式的視頻,但它們仍然識別<video>標記(除了IE8/6)。對于這些瀏覽器,我們使用了background-image來彌補它們的不支持,使用的圖片就是視頻的封面圖片。

你可能會發現,在手機設備上,<video>標記是無法擴展到全屏的,因為這些設備的屏幕長寬比限制了視頻的擴展。我在以后的文章里了會繼續探討這個問題。

視頻背景技術在 IE 8 上的問題

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

<!--[if lt IE 9]>  
<script>    
document.createElement('video');  
</script>  
<![endif]-->
在你的CSS代碼里做如下的聲明,讓IE知道

video { display: block; }
有了這句代碼,IE8至少能識別<video>標記,可以正確的顯示背景圖片。

使用JavaScript實現視頻背景

盡管使用HTML5/CSS3實現視頻背景要比使用JavaScript好一些,但不妨說一下,有一些jQuery插件和JavaScript工具包也能達到視頻背景的效果。


上一條: 簡單分析下HTML5中縮略詞標記的重要作用
下一條:
網站建設套餐
網站優化(網站推廣)
域名注冊
虛擬主機
企業郵局
相關資訊 Other News
湖南快乐十分前直遗漏關于我們業務范圍新聞資訊成功案例客服中心聯系我們網站建設網站優化付款帳戶
湖南快乐十分前直遗漏 COPYRIGHT(C) 2005-2019 亞網互聯·中國 版權所有 ALL RIGHTS RESERVED (湖南快乐十分前直遗漏)
深圳網站建設公司地址:深圳市寶安區龍華民治大道東明大廈15樓 1529-1531 室   E-Mail:[email protected]
公司電話:0755-89812581(8線)  
深圳市亞網科技有限公司 深圳網站建設常年法律顧問:朱運德律師