在網頁設計中,視頻播放是經常需要用到的功能。如果設置了自動播放的話,一般會出現視頻播放結束后,控制條和標題等組件不會自動消失的問題。這會影響用戶的觀感,降低網站的用戶體驗。那么,如何讓視頻播放完畢后自動消失呢?接下來的代碼可以幫助你實現這一點。
video::-webkit-media-controls { display:none !important; } video::-webkit-media-controls-enclosure { max-height: 0px !important; overflow:hidden !important; } video::-webkit-media-controls-overlay-play-button { display:none !important; }
代碼中,我們用了三個屬性來實現視頻播放完畢后自動消失。首先,我們設置了控制條的display屬性為none。這樣控制條就不會在視頻播放完畢后顯示了。其次,我們將控制條的高度設置為0,讓其在視頻播放期間處于無法顯示的狀態。最后,我們還將播放按鈕的display屬性設置為none,以避免在視頻播放時出現干擾。
以上代碼需要在標簽中添加,并將video標簽的controls屬性設置為false。這樣,我們就可以實現一個完全自動播放完畢后自動消失的視頻播放功能了。如果你需要進一步調整控制條消失的時間,可以添加一些JavaScript代碼來實現。
上一篇css控制字體位置