如何讓視頻做成網(wǎng)頁背景
視頻作為網(wǎng)頁背景的限制因素
在動手編碼實現(xiàn)前,視頻作為網(wǎng)頁背景的有些問題我們要先考慮清楚:
■并不是因為技術(shù)上可行你就可以任意使用:作為背景的視頻內(nèi)容必須能增強頁面內(nèi)容的感染力,而不是因為漂亮或技術(shù)上很酷就使用它。
■作為背景的視頻應該設置為自動播放,而默認狀態(tài)下應該是關(guān)閉聲音;事實上,視頻里面最好不含聲音。(你可以在頁面上放置一個控制聲音的按鈕。)
■背景視頻應該有個替代圖片,當瀏覽器不支持這種HTML5技術(shù)、視頻格式時用圖片替代。在等待背景視頻加載的過程中也應該使用背景圖片占位。而對于一些手機移動設備不支持視頻自動播放,也應該使用圖片替代。
■視頻長度很重要:太短了會明顯感到重復播放(背景視頻通常情況是重復播放的),太長就變成了情節(jié)敘事,如果這樣,這段視頻應該單獨放到頁面上播放。我建議視頻的長度應該是12-30秒之間。
■帶寬是個大問題。視頻的體積應很小,盡量的壓縮。同時,它需要在不同尺寸設備上自動的適應屏幕大小。如果有可能,應該使用JavaScript控制對不同的屏幕大小加載不同分辨率的背景視頻。背景視頻最好小于5M,如果你小于500K,那是更好。
對上面說的這些情況心里要有數(shù),下面我們來看看技術(shù)實現(xiàn)上的細節(jié)。
CSS代碼
使用HTML5里播放視頻的代碼方法視頻:
注意:這里擺放視頻格式的順序很重要,因為有些版本的谷歌瀏覽器里,如果.webm格式的視頻放在了其他視頻后面,視頻將無法播放。
我們使用視頻的第一幀圖像作為視頻的封面圖片,這樣,當背景視頻一旦加載完成,我們可以看到很流暢的從圖片過度到背景視頻播放。
讓視頻擴展到全屏的方法:
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別
建站流程
-
網(wǎng)站需求
-
網(wǎng)站策劃方案
-
頁面設計風格
-
確認交付使用
-
資料錄入優(yōu)化
-
程序設計開發(fā)
-
后續(xù)跟蹤服務
-
聯(lián)系電話
010-60259772
熱門標簽
- 網(wǎng)站建設
- 食品網(wǎng)站建設
- 微信小程序開發(fā)
- 小程序開發(fā)
- 無錫網(wǎng)站建設
- 研究所網(wǎng)站建設
- 沈陽網(wǎng)站建設
- 廊坊網(wǎng)站建設
- 鄭州網(wǎng)站建設
- 婚紗攝影網(wǎng)站建設
- 手機端網(wǎng)站建設
- 高校網(wǎng)站制作
- 天津網(wǎng)站建設
- 教育網(wǎng)站建設
- 品牌網(wǎng)站建設
- 政府網(wǎng)站建設
- 北京網(wǎng)站建設
- 網(wǎng)站設計
- 網(wǎng)站制作
最新文章
推薦新聞
更多行業(yè)-
百度算法新調(diào)整 SEO網(wǎng)站優(yōu)化工作該如何該如何去應對
百度算法新調(diào)整 SEO網(wǎng)站優(yōu)化工作該如何該如何去應對前段時間國內(nèi)的搜索...
2012-01-09 -
網(wǎng)站推廣方案的主要內(nèi)容
網(wǎng)站推廣方案通常是在網(wǎng)站策劃階段就應該完成的,甚至可以在網(wǎng)站建設階段就...
2015-01-22 -
科研院所網(wǎng)站建設如何選擇風格?
不同公司適應不同網(wǎng)站建設風格,那么如果是科研院所網(wǎng)站建設的話,該選擇哪...
2023-03-15 -
網(wǎng)站設計標準有哪些?
用戶體驗 (User Experience, UX):網(wǎng)站設計應關(guān)注用...
2023-08-04 -
靜態(tài)網(wǎng)站建設與動態(tài)網(wǎng)站的區(qū)別
在當今數(shù)字化的時代,網(wǎng)站已經(jīng)成為企業(yè)展示形象、推廣產(chǎn)品和服務的重要平臺...
2023-10-25 -
詳述查看網(wǎng)頁是否使用ALT標簽和正確寫法
alt標簽對大部分站長來說很熟悉,但很多新手站長就經(jīng)??吹?ldquo...
2012-02-03
預約專業(yè)咨詢顧問溝通!
免責聲明
非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前,請您仔細閱讀本聲明的所有條款。
1、本站部分內(nèi)容來源自網(wǎng)絡,涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學習和交流,切勿用于任何商業(yè)活動。
2、本站不承擔用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī),當本聲明與國家法律法規(guī)沖突時,以國家法律法規(guī)為準。
4、如果侵害了您的合法權(quán)益,請您及時與我們,我們會在第一時間刪除相關(guān)內(nèi)容!
聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com