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

1.首先，將video插入到網頁中，寬度設置為100%，其余的設置按照H5標準根據需求來設置。比如進入網頁自動播放(autoplay)、循環播放(loop) 、靜音(muted)等。代碼如下：

2.css設置video樣式，代碼如下：

video{

position: fixed;

z-index: -9999;

-webkit-filter: grayscale(100%);

}

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

html代碼如下:

我是video背景

css代碼如下：

div{

width:500px;

height: 300px;

font-size: 8em;

color: yellow;

}

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

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

video.playbackRate = 0.5;

完整代碼如下圖：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。