如何讓視頻做成網頁背景
視頻作為網頁背景的限制因素
在動手編碼實現(xiàn)前,視頻作為網頁背景的有些問題我們要先考慮清楚:
■并不是因為技術上可行你就可以任意使用:作為背景的視頻內容必須能增強頁面內容的感染力,而不是因為漂亮或技術上很酷就使用它。
■作為背景的視頻應該設置為自動播放,而默認狀態(tài)下應該是關閉聲音;事實上,視頻里面最好不含聲音。(你可以在頁面上放置一個控制聲音的按鈕。)
■背景視頻應該有個替代圖片,當瀏覽器不支持這種HTML5技術、視頻格式時用圖片替代。在等待背景視頻加載的過程中也應該使用背景圖片占位。而對于一些手機移動設備不支持視頻自動播放,也應該使用圖片替代。
■視頻長度很重要:太短了會明顯感到重復播放(背景視頻通常情況是重復播放的),太長就變成了情節(jié)敘事,如果這樣,這段視頻應該單獨放到頁面上播放。我建議視頻的長度應該是12-30秒之間。
■帶寬是個大問題。視頻的體積應很小,盡量的壓縮。同時,它需要在不同尺寸設備上自動的適應屏幕大小。如果有可能,應該使用JavaScript控制對不同的屏幕大小加載不同分辨率的背景視頻。背景視頻最好小于5M,如果你小于500K,那是更好。
對上面說的這些情況心里要有數(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;
}
一些老式的瀏覽器無法播放這種格式的視頻,但它們仍然識別
推薦新聞
更多行業(yè)-
網站如何提高了信息更新、傳播效率
瀏覽者訪問一個站點一般都希望對該站點能很快地有一個大致了解,這樣增進系...
2012-09-14 -
具有特色設計的網站建設要注意哪些細節(jié)
首先,在網站建設的設計上一定要講究精致、美觀、細節(jié),充分滿足網站開發(fā)用...
2022-03-22 -
高端訂制網站設計和模版站有什么區(qū)別?
高端定制網站設計是一種由專業(yè)網站設計師根據客戶需求量身打造的網站設計。...
2023-07-18 -
什么是交換機
交換機(switch),該設備是局域網應用最廣的一種網絡設備。 ...
2014-06-24 -
網站建設后為什么要做301轉跳?
在做網站優(yōu)化的時候,我們都建議站長在網站的域名或者網站的內部頁面上做一...
2020-09-04 -
網站建設需要花費多久?價格會高嗎?
現(xiàn)在提到了網站的使用,相信很多行業(yè)都不會覺得陌生,使用網絡可以完成的業(yè)...
2022-11-18
預約專業(yè)咨詢顧問溝通!
免責聲明
非常感謝您訪問我們的網站。在您使用本網站之前,請您仔細閱讀本聲明的所有條款。
1、本站部分內容來源自網絡,涉及到的部分文章和圖片版權屬于原作者,本站轉載僅供大家學習和交流,切勿用于任何商業(yè)活動。
2、本站不承擔用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國家有關法律法規(guī),當本聲明與國家法律法規(guī)沖突時,以國家法律法規(guī)為準。
4、如果侵害了您的合法權益,請您及時與我們,我們會在第一時間刪除相關內容!
聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com