關(guān)于html5視頻背景的信息

html5怎么把視頻設(shè)置成背景

第一步：準(zhǔn)備工作

創(chuàng)新互聯(lián)主要從事網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)靈石,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220

先準(zhǔn)備好一個(gè)視頻

第二步：引入視頻

這里我們需要用到了video/標(biāo)簽，然后在source里面寫視頻的路徑，autoplay用來(lái)使其自動(dòng)播放，muted用來(lái)使其靜音，loop為循環(huán)播放

video id="v1" autoplay muted loop style="width: 100%"????source? src="mp4/loading.mp4"

/video

第三步：調(diào)節(jié)視頻，使其適應(yīng)屏幕

以上的步驟還不能滿足我們的需求，這個(gè)時(shí)候我們會(huì)發(fā)現(xiàn)有滾動(dòng)條，而且視頻會(huì)遮擋我們要顯示的內(nèi)容，可這遠(yuǎn)遠(yuǎn)不是我們想要的結(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é)會(huì)色調(diào)的，同樣適用于img

第四步：視頻播放速度

可以利用video的playbackRate屬性來(lái)控制video的播放速度，如果要讓背景視頻以慢速播放的話可以加上下面的javascript

script????var video= document.getElementById('v1');????video.playbackRate = 0.5;/script

html5中怎么把視頻弄成背景

大概原理就是將視頻的堆疊順序即z-index設(shè)置小一點(diǎn)，可以設(shè)置為負(fù)值，然后將視頻position設(shè)為fixed，寬高都設(shè)為100%即可，大概代碼如下：

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

}

如何在html5中插入背景視屏

新建一個(gè)帶vedio標(biāo)簽的頁(yè)面，被給vedio的source加上視頻連接

在瀏覽器中打開，發(fā)現(xiàn)一片漆黑，因?yàn)橐曨l沒(méi)有被打開。要給video加上autoplay的屬性。

如果不需要聲音，就加上muted

還可以加上循環(huán)播放的loop

video并沒(méi)有完全撐滿瀏覽器，在body下加上margin:0

接下來(lái)給video加上樣式，使之沒(méi)有scroll，又能撐滿全屏

打來(lái)瀏覽器就能看到恰到好處的背景視頻了

在頁(yè)面中加上文字，會(huì)發(fā)現(xiàn)該文字并沒(méi)有顯示在頁(yè)面上，需要調(diào)低video的z-index值，這里直接置為-9999。效果如圖

還可以用-filter屬性，來(lái)控制video的色調(diào)，比如加上-webkit-filter:grayscale(100%)，這樣頁(yè)面中的視頻就會(huì)顯示為灰色調(diào)

此屬性也使用于圖片

還可以利用video的playbackRate屬性來(lái)控制video的播放速度，如果要讓背景視頻以慢速播放的話可以加上下面的javascript

script

var

video=

document.getElementById('v1');

video.playbackRate

=

0.5;

/script

文章標(biāo)題：關(guān)于html5視頻背景的信息
網(wǎng)頁(yè)路徑：http://muchs.cn/article28/phijjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、微信小程序、定制開發(fā)、網(wǎng)站收錄、電子商務(wù)、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)