如何讓視頻做成網頁背景
來源：尚品中國|
類型：網站百科
|時間：2014-05-31
使用視頻作為網頁背景是件很酷的事情，但也是件困難的事情。CSS里的background-image屬性只能使用圖片、SVG、顏色或漸變色。但從網站制作技術講，我們是可以偽造出一種效果，讓視頻以背景的角色出現在其它HTML元素后面。這其中的難點是視頻要填充整個瀏覽器頁面，而且要響應瀏覽器窗口大小的變化。
觀看演示1
視頻作為網頁背景的限制因素
在動手編碼實現前，視頻作為網頁背景的有些問題我們要先考慮清楚：
■并不是因為技術上可行你就可以任意使用：作為背景的視頻內容必須能增強頁面內容的感染力，而不是因為漂亮或技術上很酷就使用它。
■作為背景的視頻應該設置為自動播放，而默認狀態下應該是關閉聲音；事實上，視頻里面最好不含聲音。(你可以在頁面上放置一個控制聲音的按鈕。)
■背景視頻應該有個替代圖片，當瀏覽器不支持這種HTML5技術、視頻格式時用圖片替代。在等待背景視頻加載的過程中也應該使用背景圖片占位。而對于一些手機移動設備不支持視頻自動播放，也應該使用圖片替代。
■視頻長度很重要：太短了會明顯感到重復播放(背景視頻通常情況是重復播放的)，太長就變成了情節敘事，如果這樣，這段視頻應該單獨放到頁面上播放。我建議視頻的長度應該是12-30秒之間。
■帶寬是個大問題。視頻的體積應很小，盡量的壓縮。同時，它需要在不同尺寸設備上自動的適應屏幕大小。如果有可能，應該使用JavaScript控制對不同的屏幕大小加載不同分辨率的背景視頻。背景視頻最好小于5M，如果你小于500K，那是更好。
對上面說的這些情況心里要有數，下面我們來看看技術實現上的細節。
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;
}
一些老式的瀏覽器無法播放這種格式的視頻，但它們仍然識別
視頻作為網頁背景的限制因素
在動手編碼實現前，視頻作為網頁背景的有些問題我們要先考慮清楚：
■并不是因為技術上可行你就可以任意使用：作為背景的視頻內容必須能增強頁面內容的感染力，而不是因為漂亮或技術上很酷就使用它。
■作為背景的視頻應該設置為自動播放，而默認狀態下應該是關閉聲音；事實上，視頻里面最好不含聲音。(你可以在頁面上放置一個控制聲音的按鈕。)
■背景視頻應該有個替代圖片，當瀏覽器不支持這種HTML5技術、視頻格式時用圖片替代。在等待背景視頻加載的過程中也應該使用背景圖片占位。而對于一些手機移動設備不支持視頻自動播放，也應該使用圖片替代。
■視頻長度很重要：太短了會明顯感到重復播放(背景視頻通常情況是重復播放的)，太長就變成了情節敘事，如果這樣，這段視頻應該單獨放到頁面上播放。我建議視頻的長度應該是12-30秒之間。
■帶寬是個大問題。視頻的體積應很小，盡量的壓縮。同時，它需要在不同尺寸設備上自動的適應屏幕大小。如果有可能，應該使用JavaScript控制對不同的屏幕大小加載不同分辨率的背景視頻。背景視頻最好小于5M，如果你小于500K，那是更好。
對上面說的這些情況心里要有數，下面我們來看看技術實現上的細節。
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;
}
一些老式的瀏覽器無法播放這種格式的視頻，但它們仍然識別
來源聲明：本文章系尚品中國編輯原創或采編整理，如需轉載請注明來自尚品中國。以上內容部分(包含圖片、文字)來源于網絡，如有侵權，請及時與本站聯系（010-60259772）。
推薦新聞
更多行業-
能源行業網站建設方案
隨著能源行業的快速發展和科技的不斷進步，能源企業或機構越來越重視建立一...
2023-07-06 -
網站為什么要長期更新？對排名有哪些幫助
任何網站都離不開測試和修復過程，更不用說已經在網上建立的網站了。 如...
2020-03-26 -
真實批露：網絡公司如何做SEO優化
在這種情況下，開始有人尋找一種更好的辦法來在不給百度錢的情況下，如何獲...
2012-07-19 -
企業網站設計中的流式布局：靈活性與適應性的卓越融合
在企業網站設計領域，流式布局是一種被廣泛運用的布局模式。它的核心原理是...
2025-08-05 -
數據庫系統的組成
數據庫系統一般由數據庫、數據庫管理系統(及其開發工具)、應用系統、數據...
2014-06-16 -
SEO網站優化團隊各個專員應具備的能力
SEO網站優化團隊各個專員應具備的能力SEO網站優化中非常注重細節，一...
2011-12-14
如果您的網站可以增加轉化次數并提高客戶滿意度，該怎么辦？
預約專業咨詢顧問溝通！
Copyright ? 2025 恒久尚品 版權所有 | 京ICP備09066521號
| 公安機關備案號:11011502003910
免責聲明
誠信企業
尚品專注高端網站建設，系統平臺開發，微信小程序及APP開發服務
尚品專注高端網站建設，系統平臺開發，微信小程序及APP開發服務
免責聲明
非常感謝您訪問我們的網站。在您使用本網站之前，請您仔細閱讀本聲明的所有條款。
1、本站部分內容來源自網絡，涉及到的部分文章和圖片版權屬于原作者，本站轉載僅供大家學習和交流，切勿用于任何商業活動。
2、本站不承擔用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國家有關法律法規，當本聲明與國家法律法規沖突時，以國家法律法規為準。
4、如果侵害了您的合法權益，請您及時與我們,我們會在第一時間刪除相關內容!
聯系方式：010-60259772
電子郵件：394588593@qq.com
