網(wǎng)上有很多handsome背景都是動(dòng)態(tài)粒子，想嘗試一下視頻背景的，找了一下網(wǎng)上沒(méi)有相關(guān)資源，作為小白的我，嘗試的寫了一下

通過(guò) HTML5 的 video 標(biāo)簽實(shí)現(xiàn)的視頻背景頁(yè)面。

其中 poster 屬性指定了視頻未加載或暫停時(shí)的預(yù)覽圖，autoplay 屬性指定了視頻自動(dòng)播放，loop 屬性指定了視頻循環(huán)播放，muted 屬性指定了視頻靜音。

按鈕使用了 HTML 和 CSS 實(shí)現(xiàn)，點(diǎn)擊播放按鈕可以播放視頻，點(diǎn)擊靜音按鈕可以開啟/關(guān)閉視頻的聲音。

瀏覽器限制，第一次打開網(wǎng)站不會(huì)播放視頻，需要點(diǎn)擊開始播放，后續(xù)就自動(dòng)播放了，也添加了循環(huán)播放，與聲音按鈕。

鼠標(biāo)右鍵勾選顯示所有控件，可以全屏播放。

``開發(fā)者設(shè)置->自定義輸出head 頭部的HTML代碼``

``透明模式更加``

博客：https://www.sangxuesheng.com/

若轉(zhuǎn)載請(qǐng)留名，謝謝。

本文使用 文章同步助手 同步