html5 video修改默认样式,HTML5中将video设置为背景的方法
主要用到了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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 小米青春版2投影仪不插电能看吗
- 下一篇: html dom概念,js学习之HTML