主要用到了video標(biāo)簽，css樣式，原理是先將video標(biāo)簽利用position:fixed;使video標(biāo)簽脫離文檔流，在將他的z-index設(shè)置為最低的，比如-9999。再插入的內(nèi)容自然就覆蓋在視頻上面了。

1.首先，將video插入到網(wǎng)頁中，寬度設(shè)置為100%，其余的設(shè)置按照H5標(biāo)準(zhǔn)根據(jù)需求來設(shè)置。比如進入網(wǎng)頁自動播放(autoplay)、循環(huán)播放(loop) 、靜音(muted)等。代碼如下：

2.css設(shè)置video樣式，代碼如下：

video{

position: fixed;

z-index: -9999;

-webkit-filter: grayscale(100%);

}

3.然后就可以在video背景區(qū)域添加想要的布局了，

html代碼如下:

我是video背景

css代碼如下：

div{

width:500px;

height: 300px;

font-size: 8em;

color: yellow;

}

4.如果想要調(diào)整video的播放速度，可以使用playbackRate屬性來實現(xiàn)，代碼如下：

var video= document.querySelector('video');

video.playbackRate = 0.5;

完整代碼如下圖：

總結(jié)

以上是生活随笔為你收集整理的html5 video修改默认样式,HTML5中将video设置为背景的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。