MENU 服務(wù) 案例
網(wǎng)站建設(shè)-網(wǎng)站設(shè)計-北京網(wǎng)站建設(shè)-高端網(wǎng)站制作公司-尚品中國
我們通過擁抱變化創(chuàng)造
360°的品牌價值__
簡體
簡體中文 English

尚品與山東真諾智能設(shè)備有限公司簽署網(wǎng)站改版合作協(xié)議

類型:尚品動態(tài) 了解更多

如何讓視頻做成網(wǎng)頁背景

來源:尚品中國| 類型:網(wǎng)站百科| 時間:2014-05-31
使用視頻作為網(wǎng)頁背景是件很酷的事情,但也是件困難的事情。CSS里的background-image屬性只能使用圖片、SVG、顏色或漸變色。但從網(wǎng)站制作技術(shù)講,我們是可以偽造出一種效果,讓視頻以背景的角色出現(xiàn)在其它HTML元素后面。這其中的難點(diǎn)是視頻要填充整個瀏覽器頁面,而且要響應(yīng)瀏覽器窗口大小的變化。
 
觀看演示1

視頻作為網(wǎng)頁背景的限制因素

在動手編碼實(shí)現(xiàn)前,視頻作為網(wǎng)頁背景的有些問題我們要先考慮清楚:

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

對上面說的這些情況心里要有數(shù),下面我們來看看技術(shù)實(shí)現(xiàn)上的細(xì)節(jié)。

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

注意:這里擺放視頻格式的順序很重要,因?yàn)橛行┌姹镜墓雀铻g覽器里,如果.webm格式的視頻放在了其他視頻后面,視頻將無法播放。

我們使用視頻的第一幀圖像作為視頻的封面圖片,這樣,當(dāng)背景視頻一旦加載完成,我們可以看到很流暢的從圖片過度到背景視頻播放。

讓視頻擴(kuò)展到全屏的方法:
video#bgvid {

position: fixed; right: 0; bottom: 0;

min-width: 100%; min-height: 100%;

width: auto; height: auto;z-index: -100;

background: url(polina.jpg) no-repeat;

background-size: cover;

}

一些老式的瀏覽器無法播放這種格式的視頻,但它們?nèi)匀蛔R別
來源聲明:本文章系尚品中國編輯原創(chuàng)或采編整理,如需轉(zhuǎn)載請注明來自尚品中國。以上內(nèi)容部分(包含圖片、文字)來源于網(wǎng)絡(luò),如有侵權(quán),請及時與本站聯(lián)系(010-60259772)。
TAG標(biāo)簽:

如果您的網(wǎng)站可以增加轉(zhuǎn)化次數(shù)并提高客戶滿意度,該怎么辦?

預(yù)約專業(yè)咨詢顧問溝通!

*尚品專業(yè)顧問將盡快與您聯(lián)系

免責(zé)聲明

非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前,請您仔細(xì)閱讀本聲明的所有條款。

1、本站部分內(nèi)容來源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流,切勿用于任何商業(yè)活動。

2、本站不承擔(dān)用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。

3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī),當(dāng)本聲明與國家法律法規(guī)沖突時,以國家法律法規(guī)為準(zhǔn)。

4、如果侵害了您的合法權(quán)益,請您及時與我們,我們會在第一時間刪除相關(guān)內(nèi)容!

聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com

現(xiàn)在就與專業(yè)咨詢顧問溝通!

  • 全國服務(wù)熱線

    400-700-4979

  • 北京服務(wù)熱線

    010-60259772

信息保護(hù)中請放心填寫
在線咨詢

免責(zé)聲明

非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前,請您仔細(xì)閱讀本聲明的所有條款。

1、本站部分內(nèi)容來源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流,切勿用于任何商業(yè)活動。

2、本站不承擔(dān)用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。

3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī),當(dāng)本聲明與國家法律法規(guī)沖突時,以國家法律法規(guī)為準(zhǔn)。

4、如果侵害了您的合法權(quán)益,請您及時與我們,我們會在第一時間刪除相關(guān)內(nèi)容!

聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com