saber zou:動態(tài)的視頻比靜態(tài)的圖片更生動,表達(dá)的信息更多。但是目前網(wǎng)絡(luò)上的視頻其實跟整個網(wǎng)頁的設(shè)計是脫離的,它們都被框起來放在特定的區(qū)域供瀏覽者點擊觀看,視頻并沒有像圖片一樣成為一個網(wǎng)站的裝飾元素。其中的原因主要就是瀏覽器的兼容性,網(wǎng)絡(luò)速度和設(shè)計理念的限制。但是網(wǎng)絡(luò)技術(shù)發(fā)展到今天,特別是HTML5的不斷完善和瀏覽器的不斷進步,視頻在網(wǎng)頁設(shè)計開發(fā)方面的潛力越來越被發(fā)掘出來了,為提高網(wǎng)頁體驗和豐富內(nèi)容呈現(xiàn)提供了新的方向。
那我們怎么把視頻元素很好地結(jié)合到一個網(wǎng)頁設(shè)計當(dāng)中呢?我們首先來看一些例子。一個最常見的典型用法就是網(wǎng)頁背景不再使用靜態(tài)圖片而是一個視頻。
Dadaab Stories這個網(wǎng)站就很好地運用視頻背景來反映網(wǎng)站的內(nèi)容。這是一個介紹世界最大的難民營的網(wǎng)站,視頻的背景很生動地讓觀眾看到難民營的情況。
下面這個關(guān)于一項自行車比賽的網(wǎng)站也運用了視頻來增強視覺沖擊力,當(dāng)鼠標(biāo)懸停在焦點圖上,就會呈現(xiàn)low motion的視頻,充滿運動的張力。
最近,微軟IE11和亞洲動物基金合作發(fā)布的公益網(wǎng)站“月熊志”中也采用了大量的視頻(IE居然已經(jīng)到11了,對HTML5的支持還是挺好的,而且還加入了WebGL的支持,這個網(wǎng)站就用到這個3D技術(shù),呵呵)。除了有的頁面的背景是可愛的月熊視頻以外,在網(wǎng)站首頁的三本精美的書本的封面其實也是視頻。這個設(shè)計更加增強了這個數(shù)字化閱讀的感覺,書本的封面是生動而富有變化的。
編者:這個網(wǎng)站實在是讓人震驚,強烈推薦!公益網(wǎng)站能做成這樣,讓人汗顏!
http://moonbear.animalsasia.org/ie/
在網(wǎng)頁中加入視頻背景是相當(dāng)簡單的,利用HTML5的<video> tag就可以輕松搞定。
首先,要準(zhǔn)備好瀏覽器支持的視頻,格式可以是mp4、ogg或者webm,你可以到這里了解更多關(guān)于視頻格式:http://www.w3schools.com/html/html5_video.asp 這里就不對這個話題進行詳細(xì)敘述了。
其次就是視頻嵌入的HTML代碼,參考如下:
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0”>
<source src="videos/xxxx.mp4" type="video/mp4”>
<source src="videos/xxxx.webm" type="video/webm”>
Video not supported </video>
接下來就是CSS,這是讓嵌入的視頻成為背景的關(guān)鍵:
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
overflow: hidden;
z-index: -1000;
}
采用絕對定位,而“width: auto; height: auto;”和“min-width: 100%; min-height: 100%” 就是告訴瀏覽器總是以視頻的寬度或者高度的100%來顯示,任何大于100%的部分就是“overflow:hidden”被隱藏起來的。這養(yǎng)定義適用于任何比例的視頻元素。最后別忘了“z-index: -1000;”,確保視頻至于背景置于底層。
當(dāng)然還有好一些jQuery的plug-in可以用,這里介紹一個做得最好的BIGVIDEO.JS。這個plugin可以輕松讓你嵌入全屏的視頻背景。
http://dfcb.github.io/BigVideo.js/
最后,我們總結(jié)一下。雖然在網(wǎng)頁設(shè)計開發(fā)中加入視頻元素會給人很cool的印象,但是還是有不少地方需要注意的,否則效果可能適得其反。
- 注意要消除聲音,因為一般聲音的突然出現(xiàn)會對用戶造成困擾,如果一定要音頻的話,一定要加上一個“關(guān)閉”按鈕讓用戶可以選擇關(guān)掉。
- 使用視頻背景的時候,注意前景內(nèi)容的對比,畢竟只是背景,不能喧賓奪主,可以適當(dāng)?shù)卦谝曨l上加一層紋理質(zhì)感,或者調(diào)暗視頻的亮度。
- 提供一張視頻第一幀的的清晰截圖作為圖片背景,以照顧不支持視頻背景的瀏覽器或者在移動設(shè)備,另外也可以防止視頻沒有加載完畢而不至于頁面上出現(xiàn)空白。
- 視頻的長短要合適,太短并且不是首尾連貫的視頻會給人強烈的重復(fù)感,太長就變成敘述了,最佳的長度應(yīng)該在10’ -30’左右。
作者:saber zou
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊:網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法,更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博:擁有粉絲量60萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ,歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航:全球頂尖設(shè)計網(wǎng)站推薦,設(shè)計師必備導(dǎo)航:http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎?
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號:【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加:
復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評論!每天贏獎品
點擊 登錄 后,在評論區(qū)留言,系統(tǒng)會隨機派送獎品
2012年成立至今,是國內(nèi)備受歡迎的設(shè)計師平臺,提供獎品贊助 聯(lián)系我們
AI輔助海報設(shè)計101例
已累計誕生 753 位幸運星
發(fā)表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓