html5视频作为页面背景
生活随笔
收集整理的這篇文章主要介紹了
html5视频作为页面背景
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
之前的代碼因?yàn)閏hrome的升級(jí)，視頻文件無(wú)法自動(dòng)播放了。在這里更新一下源碼，親測(cè)可用。
復(fù)制代碼并且替換視頻文件即可。當(dāng)然，比較懶得同學(xué)，掃碼文末的二維碼，關(guān)注公眾號(hào)，在后臺(tái)回復(fù)：小視頻。即可獲取源代碼和附帶的mp4視頻文件哦。
<!DOCTYPE HTML> <html> <style>*{ 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; } p{width: 100%;text-align: center;font-size: 40px;color: white;} </style> <body> <p>大家好 </p> <p>大家好 </p> <p>大家好 </p> <p>大家好 </p> <p>大家好 </p> <p>大家好 </p> <video autoplay loop muted><source src="./movie.mp4" type="video/mp4" /> Your browser does not support the video tag. </video></body> </html>關(guān)注公眾號(hào)獲取更多內(nèi)容，有問(wèn)題也可在公眾號(hào)提問(wèn)哦：
?
強(qiáng)哥叨逼叨
叨逼叨編程、互聯(lián)網(wǎng)的見(jiàn)解和新鮮事
?
總結(jié)
以上是生活随笔為你收集整理的html5视频作为页面背景的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 编程基础之二十一:导师巴贝奇与Ada(四
- 下一篇： vue 引入高德地图 路线规划