HTML5的視頻播放功能讓網(wǎng)頁嵌入視頻更加方便和實用了。然而,有時候我們需要隱藏掉視頻播放器的列表,以便更好地實現(xiàn)自定義的視頻播放控制,請看下面的代碼:
<video id="myVideo" controls> <source src="movie.mp4" type='video/mp4'> <source src="movie.ogg" type='video/ogg'> <source src="movie.webm" type='video/webm'> <!--隱藏列表--> <style> #myVideo::-webkit-media-controls-enclosure { display: flex !important } #myVideo::-webkit-media-controls-panel { display: none !important } </style> </video>代碼中,我們在視頻標簽中加入了樣式標簽,用來覆蓋默認的視頻播放器樣式。其中,
#myVideo
為視頻元素的ID,通過偽元素::-webkit-media-controls-enclosure
和::-webkit-media-controls-panel
來分別控制視頻播放器外框和控制面板的樣式。在這里,我們將外框?qū)傩?code>display設(shè)置為flex
,以便更好地控制樣式;同時將控制面板屬性display
設(shè)置為none
,以便實現(xiàn)隱藏列表的效果。
通過以上代碼,我們可以在HTML5視頻播放時,輕松地隱藏列表,更好地實現(xiàn)自定義的視頻播放控制。上一篇html5收藏代碼生成器
下一篇html5支付寶代碼