如何讓視頻做成網(wǎng)頁背景
視頻作為網(wǎng)頁背景的限制因素
在動手編碼實現(xiàn)前,視頻作為網(wǎng)頁背景的有些問題我們要先考慮清楚:
■并不是因為技術(shù)上可行你就可以任意使用:作為背景的視頻內(nèi)容必須能增強頁面內(nèi)容的感染力,而不是因為漂亮或技術(shù)上很酷就使用它。
■作為背景的視頻應(yīng)該設(shè)置為自動播放,而默認狀態(tài)下應(yīng)該是關(guān)閉聲音;事實上,視頻里面最好不含聲音。(你可以在頁面上放置一個控制聲音的按鈕。)
■背景視頻應(yīng)該有個替代圖片,當瀏覽器不支持這種HTML5技術(shù)、視頻格式時用圖片替代。在等待背景視頻加載的過程中也應(yīng)該使用背景圖片占位。而對于一些手機移動設(shè)備不支持視頻自動播放,也應(yīng)該使用圖片替代。
■視頻長度很重要:太短了會明顯感到重復播放(背景視頻通常情況是重復播放的),太長就變成了情節(jié)敘事,如果這樣,這段視頻應(yīng)該單獨放到頁面上播放。我建議視頻的長度應(yīng)該是12-30秒之間。
■帶寬是個大問題。視頻的體積應(yīng)很小,盡量的壓縮。同時,它需要在不同尺寸設(shè)備上自動的適應(yīng)屏幕大小。如果有可能,應(yīng)該使用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)站策劃方案
-
頁面設(shè)計風格
-
確認交付使用
-
資料錄入優(yōu)化
-
程序設(shè)計開發(fā)
-
后續(xù)跟蹤服務(wù)
-
聯(lián)系電話
010-60259772
熱門標簽
- 網(wǎng)站建設(shè)
- 食品網(wǎng)站建設(shè)
- 微信小程序開發(fā)
- 小程序開發(fā)
- 無錫網(wǎng)站建設(shè)
- 研究所網(wǎng)站建設(shè)
- 沈陽網(wǎng)站建設(shè)
- 廊坊網(wǎng)站建設(shè)
- 鄭州網(wǎng)站建設(shè)
- 婚紗攝影網(wǎng)站建設(shè)
- 手機端網(wǎng)站建設(shè)
- 高校網(wǎng)站制作
- 天津網(wǎng)站建設(shè)
- 教育網(wǎng)站建設(shè)
- 品牌網(wǎng)站建設(shè)
- 政府網(wǎng)站建設(shè)
- 北京網(wǎng)站建設(shè)
- 網(wǎng)站設(shè)計
- 網(wǎng)站制作
最新文章
推薦新聞
更多行業(yè)-
集團網(wǎng)站建設(shè)哪家好?怎么選擇?
集團網(wǎng)站就是在最近幾年會成為很多企業(yè)比較關(guān)注的,因為在網(wǎng)站建設(shè)上,能夠...
2022-10-13 -
網(wǎng)站建設(shè)應(yīng)注意的4大問題
1、網(wǎng)站內(nèi)容(Website content)瀏覽Internet,我...
2012-07-24 -
定制網(wǎng)站建設(shè)價格受到哪些因素影響?為什么會有所影響?
在現(xiàn)實生活當中,越來越多的互聯(lián)網(wǎng)企業(yè)對于網(wǎng)絡(luò)上的推廣并不是特別樂觀,他...
2022-09-27 -
如何把我的網(wǎng)站自然排名提高
如何把我的網(wǎng)站自然排名提高,并不能夠左右北京網(wǎng)站建設(shè)的轉(zhuǎn)化率,希望能夠...
2012-09-28 -
網(wǎng)站的規(guī)劃與發(fā)展策略
一個成功的網(wǎng)站設(shè)計離不開良好的規(guī)劃與發(fā)展策略。在建立網(wǎng)站時,對網(wǎng)站的各...
2014-08-05 -
建設(shè)網(wǎng)站如何找一家靠譜的網(wǎng)建公司
對于沒有專業(yè)網(wǎng)絡(luò)部門的企業(yè),企業(yè)網(wǎng)站一般選擇與專業(yè)的第三方網(wǎng)站建設(shè)公司...
2020-05-20
預約專業(yè)咨詢顧問溝通!
免責聲明
非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前,請您仔細閱讀本聲明的所有條款。
1、本站部分內(nèi)容來源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(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