網(wǎng)站案例網(wǎng)站套餐網(wǎng)站功能網(wǎng)站SEO優(yōu)化南昌網(wǎng)站建設(shè)九江網(wǎng)站建設(shè)萍鄉(xiāng)網(wǎng)站建設(shè)景德鎮(zhèn)網(wǎng)站建設(shè)新余網(wǎng)站建設(shè)鷹潭網(wǎng)站建設(shè)贛州網(wǎng)站建設(shè)吉安網(wǎng)站建設(shè)宜春網(wǎng)站建設(shè)撫州網(wǎng)站建設(shè)上饒網(wǎng)站建設(shè)樂(lè)平網(wǎng)站建設(shè)瑞昌網(wǎng)站建設(shè)共青城網(wǎng)站建設(shè)廬山網(wǎng)站建設(shè)貴溪網(wǎng)站建設(shè)南京網(wǎng)站建設(shè)沈陽(yáng)網(wǎng)站建設(shè)石家莊網(wǎng)站建設(shè)哈爾濱網(wǎng)站建設(shè)杭州網(wǎng)站建設(shè)長(zhǎng)沙網(wǎng)站建設(shè)濟(jì)南網(wǎng)站建設(shè)煙臺(tái)網(wǎng)站建設(shè)廣州網(wǎng)站建設(shè)武漢網(wǎng)站建設(shè)成都網(wǎng)站建設(shè)蘭州網(wǎng)站建設(shè)昆明網(wǎng)站建設(shè)臺(tái)北網(wǎng)站建設(shè)南寧網(wǎng)站建設(shè)銀川網(wǎng)站建設(shè)太原網(wǎng)站建設(shè)長(zhǎng)春網(wǎng)站建設(shè)合肥網(wǎng)站建設(shè)鄭州網(wǎng)站建設(shè)西安網(wǎng)站建設(shè)西寧網(wǎng)站建設(shè)呼和浩特網(wǎng)站建設(shè)拉薩網(wǎng)站建設(shè)烏魯木齊網(wǎng)站建設(shè)貴陽(yáng)網(wǎng)站建設(shè)深圳網(wǎng)站建設(shè)海口網(wǎng)站建設(shè)南昌網(wǎng)站建設(shè)矩惠互動(dòng)游戲微傳單企業(yè)郵箱小程序價(jià)格資訊中心
全國(guó)服務(wù)熱線:
0791-88196636

嘉興開(kāi)發(fā)網(wǎng)站:高端網(wǎng)站使用視頻作為網(wǎng)頁(yè)頭圖背景實(shí)現(xiàn)代碼教程分享

 二維碼 16913
發(fā)表時(shí)間:2020-12-17 10:38作者:南昌莫非網(wǎng)絡(luò)科技公司來(lái)源:南昌莫非網(wǎng)絡(luò)科技公司網(wǎng)址:http://m.what-ismyip.com

嘉興開(kāi)發(fā)網(wǎng)站:高端網(wǎng)站使用視頻作為網(wǎng)頁(yè)頭圖背景實(shí)現(xiàn)代碼教程分享。

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

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

1、并不是因?yàn)榧夹g(shù)上可行你就可以任意使用:作為背景的視頻內(nèi)容必須能增強(qiáng)頁(yè)面內(nèi)容的感染力,而不是因?yàn)槠粱蚣夹g(shù)上很酷就使用它。

2、作為背景的視頻應(yīng)該設(shè)置為自動(dòng)播放,而默認(rèn)狀態(tài)下應(yīng)該是關(guān)閉聲音;事實(shí)上,視頻里面**不含聲音。(你可以在頁(yè)面上放置一個(gè)控制聲音的按鈕。)

3、背景視頻應(yīng)該有個(gè)替代圖片,當(dāng)瀏覽器不支持這種HTML5技術(shù)、視頻格式時(shí)用圖片替代。在等待背景視頻加載的過(guò)程中也應(yīng)該使用背景圖片占位。而對(duì)于一些手機(jī)移動(dòng)設(shè)備不支持視頻自動(dòng)播放,也應(yīng)該使用圖片替代。

4、視頻長(zhǎng)度很重要:太短了會(huì)明顯感到重復(fù)播放(背景視頻通常情況是重復(fù)播放的),太長(zhǎng)就變成了情節(jié)敘事,如果這樣,這段視頻應(yīng)該單獨(dú)放到頁(yè)面上播放。我建議視頻的長(zhǎng)度應(yīng)該是12-30秒之間。

5、帶寬是個(gè)大問(wèn)題。視頻的體積應(yīng)很小,盡量的壓縮。同時(shí),它需要在不同尺寸設(shè)備上自動(dòng)的適應(yīng)屏幕大小。如果有可能,應(yīng)該使用JavaScript控制對(duì)不同的屏幕大小加載不同分辨率的背景視頻。背景視頻**小于5M,如果你小于500K,那是更好。

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

CSS代碼

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

<video autoplay loop poster="polina.jpg" id="bgvid">

<source src="polina.webm" type="video/webm">

<source src="polina.mp4" type="video/mp4">

</video>

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

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

讓視頻擴(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;

}

一些老式的瀏覽器無(wú)法播放這種格式的視頻,但它們?nèi)匀蛔R(shí)別<video>標(biāo)記(除了IE8/6)。對(duì)于這些瀏覽器,我們使用了background-image來(lái)彌補(bǔ)它們的不支持,使用的圖片就是視頻的封面圖片。

你可能會(huì)發(fā)現(xiàn),在手機(jī)設(shè)備上,<video>標(biāo)記是無(wú)法擴(kuò)展到全屏的,因?yàn)檫@些設(shè)備的屏幕長(zhǎng)寬比限制了視頻的擴(kuò)展。我在以后的文章里了會(huì)繼續(xù)探討這個(gè)問(wèn)題。

視頻背景技術(shù)在 IE 8 上的問(wèn)題

IE8不僅不能識(shí)別<video>標(biāo)記,它對(duì)所有的HTML5標(biāo)記都不能識(shí)別,這是一個(gè)問(wèn)題,對(duì)于IE8,我們至少要讓替代的背景圖片能顯示出來(lái)。為了達(dá)到這個(gè)目的,我們需要兩件事情:一行JavaScript代碼,一個(gè)CSS條件判斷注釋語(yǔ)句。

<!--[if lt IE 9]>

<script>

document.createElement('video');

</script>

<![endif]-->

在你的CSS代碼里做如下的聲明,讓IE知道

video { display: block; }

有了這句代碼,IE8至少能識(shí)別<video>標(biāo)記,可以正確的顯示背景圖片。

使用JavaScript實(shí)現(xiàn)視頻背景

最后南昌莫非網(wǎng)絡(luò)科技公司小編想說(shuō)盡管使用HTML5/CSS3實(shí)現(xiàn)視頻背景要比使用JavaScript好一些,但不妨說(shuō)一下,有一些jQuery插件和JavaScript工具包也能達(dá)到視頻背景的效果。

企業(yè)新聞
關(guān)于南昌莫非網(wǎng)絡(luò)科技公司2022年元旦放假安排通知.元旦:1月1日(星期六)至1月3號(hào)(星期一)放假,共計(jì)三天(無(wú)調(diào)休),1月4日(星期二)上班。
關(guān)于南昌莫非網(wǎng)絡(luò)科技公司2021年國(guó)慶節(jié)放假安排通知。根據(jù)《國(guó)務(wù)院辦公廳關(guān)于2021年部分節(jié)假日安排的通知》(國(guó)辦發(fā)明電〔2020〕27號(hào)),結(jié)合我單位工作實(shí)際情況,現(xiàn)就2021年國(guó)慶放假的有關(guān)事項(xiàng)安排如下。
南昌莫非網(wǎng)絡(luò)科技公司2021年中秋節(jié)放假通知.一、假期從:2021年09月19日到2021年09月21日結(jié)束,假期共3天(9月18日正常上班,9月26日正常休息)。二、如有緊急情況,請(qǐng)各位同仁及時(shí)配合相關(guān)部門(mén)主管人員把事情處理妥善。做好防火、防盜工作并督促各部門(mén)關(guān)好辦公區(qū)域的門(mén)、窗等。
根據(jù)《國(guó)務(wù)院辦公廳關(guān)于2021年部分節(jié)假日安排的通知》(國(guó)辦發(fā)明電〔2020〕27號(hào)),結(jié)合我單位工作實(shí)際情況,現(xiàn)就2021年端午節(jié)放假的有關(guān)事項(xiàng)安排如下:一、放假時(shí)間:2021年6月12日(星期六)至2021年6月14日(星期一),共放假3天。
南昌莫非網(wǎng)絡(luò)科技公司2021年五一勞動(dòng)節(jié)放假通知.現(xiàn)就2021年五一勞動(dòng)節(jié)放假的有關(guān)事項(xiàng)安排如下:一、放假時(shí)間,2021年5月1日(星期六)至2020年5月5日(星期三),共放假5天。4月25日(星期日)上班,5月6日(星期四)正常上班。
南昌莫非網(wǎng)絡(luò)科技公司2021年清明節(jié)放假通知.2021年4月3日(星期六)-2021年4月5日(星期一)放假,共3天。4月6日(星期二)正常上班。放假期間,各項(xiàng)業(yè)務(wù)照常運(yùn)行,售后問(wèn)題您可以直接相關(guān)負(fù)責(zé)人提交服務(wù)單,技術(shù)人員將在12小時(shí)之內(nèi)處理。
關(guān)于南昌莫非網(wǎng)絡(luò)科技公司2021年春節(jié)放假安排通知.一、春節(jié)放假時(shí)間:2021年2月5日(農(nóng)歷臘月二十四)至2021年2月18日(農(nóng)歷正月初七)放假,共13天,2月19日(星期五)開(kāi)始上班,2月21日星期日(農(nóng)歷正月初十)恢復(fù)正常上班。由于疫情,假期時(shí)間可能會(huì)有所變化,具體以通知為準(zhǔn)。
關(guān)于南昌莫非網(wǎng)絡(luò)科技公司2021年01月01日元旦放假通知。一、放假時(shí)間:2021年1月1日(星期五)至2021年1月3日(星期日)放假,共3天;2021年1月4日(星期一)正常上班。公司放假期間如有相關(guān)業(yè)務(wù)及服務(wù)事宜敬請(qǐng)撥打我司24小時(shí)服務(wù)熱線:0791-8819-6636或咨詢客服QQ:2401077293,可隨時(shí)與我司進(jìn)行聯(lián)系。
南昌莫非網(wǎng)絡(luò)科技公司2020年中秋節(jié)+國(guó)慶節(jié)放假通知。根據(jù)《國(guó)務(wù)院辦公廳關(guān)于2020年部分節(jié)假日安排的通知》,為了讓大家度過(guò)一個(gè)充實(shí)、平安的假期,現(xiàn)把2020年中秋國(guó)慶放假時(shí)間及溫馨提示通知如下!
南昌莫非網(wǎng)絡(luò)科技公司2020年五一放假通知.在過(guò)去的歲月里,南昌莫非網(wǎng)絡(luò)科技公司與新老客戶一直保持著愉快的合作,這離不開(kāi)大家的鼎立支持和幫助。在未來(lái)的日子里還需要更多朋友們的支持與幫助,希望你們能始終如一的支持南昌莫非網(wǎng)絡(luò)科技,并提出您寶貴的意見(jiàn)及建議。
南昌莫非網(wǎng)絡(luò)科技公司2020年春節(jié)寒假放假安排通知。南昌莫非網(wǎng)絡(luò)科技公司提前祝全國(guó)合作伙伴新春快樂(lè)、闔家幸福!預(yù)祝全體員工春節(jié)快樂(lè)!
南昌莫非網(wǎng)絡(luò)科技公司2020年元旦節(jié)放假安排通知.元旦將至,南昌莫非網(wǎng)絡(luò)科技公司預(yù)祝全體員工元旦快樂(lè)!現(xiàn)將2020年元旦節(jié)放假安排通告如下:一、放假時(shí)間:2020年1月1日,共1天。
地區(qū)做網(wǎng)站導(dǎo)航
南昌網(wǎng)站建設(shè)  九江網(wǎng)站建設(shè)  萍鄉(xiāng)網(wǎng)站建設(shè) 景德鎮(zhèn)網(wǎng)站建設(shè)  新余網(wǎng)站建設(shè)  鷹潭網(wǎng)站建設(shè) 贛州網(wǎng)站建設(shè)  吉安網(wǎng)站建設(shè)  宜春網(wǎng)站建設(shè)  撫州網(wǎng)站建設(shè)  上饒網(wǎng)站建設(shè)  樂(lè)平網(wǎng)站建設(shè) 瑞昌網(wǎng)站建設(shè)  共青城網(wǎng)站建設(shè)  廬山網(wǎng)站建設(shè)  貴溪網(wǎng)站建設(shè)  南京網(wǎng)站建設(shè)  沈陽(yáng)網(wǎng)站建設(shè)  石家莊網(wǎng)站建設(shè)  哈爾濱網(wǎng)站建設(shè)  杭州網(wǎng)站建設(shè)  長(zhǎng)沙網(wǎng)站建設(shè)  濟(jì)南網(wǎng)站建設(shè) 煙臺(tái)網(wǎng)站建設(shè)  廣州網(wǎng)站建設(shè)  武漢網(wǎng)站建設(shè)  成都網(wǎng)站建設(shè) 蘭州網(wǎng)站建設(shè)  昆明網(wǎng)站建設(shè)  臺(tái)北網(wǎng)站建設(shè) 南寧網(wǎng)站建設(shè)  銀川網(wǎng)站建設(shè)  太原網(wǎng)站建設(shè)  長(zhǎng)春網(wǎng)站建設(shè)  合肥網(wǎng)站建設(shè)  鄭州網(wǎng)站建設(shè)  西寧網(wǎng)站建設(shè) 西安網(wǎng)站建設(shè)  呼和浩特網(wǎng)站建設(shè)  拉薩網(wǎng)站建設(shè)  烏魯木齊網(wǎng)站建設(shè)  貴陽(yáng)網(wǎng)站建設(shè) 深圳網(wǎng)站建設(shè)  海口網(wǎng)站建設(shè)

南昌莫非網(wǎng)絡(luò)科技公司專汪做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站制作,網(wǎng)站開(kāi)發(fā),建網(wǎng)站,定制網(wǎng)站。十三年品牌值得信賴!

網(wǎng)站建設(shè)行業(yè)方案
網(wǎng)站維護(hù)知識(shí)
網(wǎng)站制作常見(jiàn)問(wèn)題
SEO網(wǎng)站優(yōu)化教程
踏上云端,轉(zhuǎn)型升級(jí)融入互聯(lián)網(wǎng)時(shí)代,現(xiàn)在就聯(lián)系我們吧!
——      我們時(shí)刻為你提供更多優(yōu)質(zhì)互聯(lián)網(wǎng)技術(shù)服務(wù)      ——
姓名:
*
聯(lián)系方式:
*
咨詢項(xiàng)目:
內(nèi)容:
*
在線留言
關(guān)于我們:南昌莫非文化傳媒有限公司(簡(jiǎn)稱:莫非傳媒)專注于網(wǎng)站建設(shè),網(wǎng)站SEO優(yōu)化,小程序制作。提供全方位用戶體驗(yàn)規(guī)劃,品牌形象設(shè)計(jì)服務(wù)。為每一位企業(yè)客戶的成長(zhǎng)、騰飛助力!        網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站開(kāi)發(fā),就選網(wǎng)站建設(shè)公司-南昌莫非傳媒!
掃一掃微信便捷交流
|
|
|
|
|
|
|
|
|
|
|
|
|
地址:江西省南昌市西湖區(qū)洪城路6號(hào)國(guó)貿(mào)廣場(chǎng)A座巨豪峰
業(yè)務(wù)咨詢  :  
272482065
售后服務(wù) :
2401077293
服務(wù)熱線:
0791-88196636
______________________________________________________________________________________________________________________________________________________________________________________________________