HTML5實現首頁動態視訊背景
阿新 • • 發佈:2019-09-25
話不多說,先看效果圖:
炫酷嗎?你想實現這種動態視訊作為背景的首頁嗎?來,一起來學習,本文將帶你一起實現H5動態視訊背景;
首先網上找一段清晰的視訊下載下來,最好是MP4格式的;
下載好了之後我們新建一個html檔案來寫程式碼:
html程式碼:
<video id="v1" autoplay loop muted> <source src="./video2.mp4" type="video/mp4" /> </video>
一個video標籤包裹著,source代表來原始檔,autoplay屬性是自動播放,loop代表迴圈播放,muted代表無聲播放;
如果不加入autoplay屬性是無法自動播放的,頁面將會黑屏展示;
css程式碼:
*{ margin: 0px; padding: 0px; } video{ position: fixed; right: 0px; bottom: 0px; min-width: 100%; min-height: 100%; height: auto; width: auto; /*加濾鏡*/ /*filter: blur(15px); //背景模糊設定 */ /*-webkit-filter: grayscale(100%);*/ /*filter:grayscale(100%); //背景灰度設定*/ z-index:-11 } source{ min-width: 100%; min-height: 100%; height: auto; width: auto; }
css程式碼主要是進行定位和放大達到全屏播放的效果,主要是對video進行寬高之類的設定,還有別忘了要給z-index給個值,讓放置在底部,只要小於0都可以,沒有影響;
就這樣我們的動態視訊背景就完成了,如果想設定播放速度,我們可以新增js程式碼(video標籤加上id=“v1”屬性):
var video= document.getElementById('v1'); video.playbackRate = 1.5;
那麼如果我們想要新增內容到頁面上怎麼辦呢?
<video id="v1" autoplay loop muted> <source src="./video2.mp4" type="video/mp4" /> </video> <h1 style="color:white">123465</h1>
是的,在video標籤外部新增,然後我們的效果圖就是這樣的(由於部落格對圖片大小有限制,所以截圖時間沒有很長):
是不是用H5實現這種動態視訊背景效果很簡單?趕緊一起來試試吧!