您好,登錄后才能下訂單哦!
小編給大家分享一下HTML5如何設(shè)置視頻背景,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
第一步:準(zhǔn)備工作
工欲善其事必先利其器,我們首先需要準(zhǔn)備一個視頻,我準(zhǔn)備了一個這樣的視頻,如圖:
是不是很美,當(dāng)然了,,沒我美哈
第二步:引入視頻
這里我們需要用到了video/標(biāo)簽,然后在source里面寫視頻的路徑,autoplay用來使其自動播放,muted用來使其靜音,loop為循環(huán)播放,依照個人意愿愿意加就加,不加拉倒哈
<video id="v1" autoplay muted loop style="width: 100%"> <source src="mp4/loading.mp4"> </video>
第三步:調(diào)節(jié)視頻,使其適應(yīng)屏幕
以上的步驟還不能滿足我們的需求,這個時候我們會發(fā)現(xiàn)有滾動條,而且視頻會遮擋我們要顯示的內(nèi)容,可這遠遠不是我們想要的結(jié)果啊,不怕,有我呢
video{ position: fixed; right:0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -9999; /*灰色調(diào)*/ /*-webkit-filter:grayscale(100%)*/ }
這樣就OK了,-webkit-filter:grayscale(100%)為調(diào)節(jié)會色調(diào)的,同樣適用于img
第四步:視頻播放速度
可以利用video的playbackRate屬性來控制video的播放速度,如果要讓背景視頻以慢速播放的話可以加上下面的javascript
<script> var video= document.getElementById('v1'); video.playbackRate = 0.5; </script>
好嘞,快去設(shè)置你的酷炫背景吧
以上是HTML5如何設(shè)置視頻背景的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。