您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)html5實現(xiàn)動態(tài)視頻背景的方法,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
首先我們來看看實現(xiàn)的效果圖:
看上去是不是很炫酷?
如果你也想實現(xiàn)這種效果,那就快來和我一起學(xué)習(xí)吧。
具體步驟:
首先網(wǎng)上找一段清晰的視頻下載下來,最好是MP4格式的;
下載好了之后我們新建一個html文件來寫代碼:
html代碼:
<video id="v1" autoplay loop muted> <source src="./video2.mp4" type="video/mp4" /> </video>
一個video標(biāo)簽包裹著,source代表來源文件,autoplay屬性是自動播放,loop代表循環(huán)播放,muted代表無聲播放;
css代碼:
*{ margin: 0px; padding: 0px; } video{ position: fixed; right: 0px; bottom: 0px; min-width: 100%; min-height: 100%; height: auto; width: auto; /*加濾鏡*/ /*filter: blur(15px); //背景模糊設(shè)置 */ /*-webkit-filter: grayscale(100%);*/ /*filter:grayscale(100%); //背景灰度設(shè)置*/ z-index:-11 } source{ min-width: 100%; min-height: 100%; height: auto; width: auto; }
css代碼主要是進行定位和放大達到全屏播放的效果,主要是對video進行寬高之類的設(shè)置,還有別忘了要給z-index給個值,讓放置在底部,只要小于0都可以,沒有影響;
就這樣我們的動態(tài)視頻背景就完成了,如果想設(shè)置播放速度,我們可以添加js代碼(video標(biāo)簽加上id=“v1”屬性):
var video= document.getElementById('v1'); video.playbackRate = 1.5;
那么如果我們想要添加內(nèi)容到頁面上怎么辦呢?
<video id="v1" autoplay loop muted> <source src="./video2.mp4" type="video/mp4" /> </video> <h2 style="color:white">123465</h2>
是的,在video標(biāo)簽外部添加,然后我們的效果圖就是這樣的(由于博客對圖片大小有限制,所以截屏?xí)r間沒有很長):
關(guān)于“html5實現(xiàn)動態(tài)視頻背景的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(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)容。