在網(wǎng)站項(xiàng)目的制作中,有時(shí)候需要在網(wǎng)站首頁(yè)插入一段視頻,并且這段視頻作為網(wǎng)頁(yè)的背景全屏播放,不影響網(wǎng)站的正常瀏覽。成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司給大家分享一種用Javascript庫(kù)Bideo。js來(lái)實(shí)現(xiàn)此效果的思路。
首先要讓視頻可以自動(dòng)調(diào)整,用Bideo。js根據(jù)當(dāng)前瀏覽器窗口的大小自動(dòng)調(diào)整視頻尺寸,當(dāng)瀏覽器窗口調(diào)整時(shí),它會(huì)自適應(yīng)窗口尺寸,移動(dòng)端、PC端都能自動(dòng)調(diào)整,使視頻作為背景并全屏展示。然后要實(shí)現(xiàn)覆蓋,視頻作為網(wǎng)頁(yè)背景后,我們可以任意在視頻上層放置任意HTML內(nèi)容。最后就是視頻封面,頁(yè)面打開(kāi)時(shí),視頻可能需要幾秒鐘才能加載完,那么我們可以設(shè)置一張圖片作為視頻的封面,等加載完再播放。
對(duì)于HTML,<video>標(biāo)簽用來(lái)加載視頻,然后用loop屬性進(jìn)行循環(huán)播放。用#video_cover設(shè)置視頻封面。#overlay可以設(shè)置遮罩層,所有其他頁(yè)面內(nèi)容在遮罩層上展示。還可以添加#video_controls,用來(lái)控制視頻播放與暫停。在CSS代碼中,#container和#background_video的設(shè)置是關(guān)鍵,需要大家特別注意。