Is it possible to just use audio control and hide others from html5 video controls bar?
I want to hide control bar and just use audio turn off/on button. I read revelant article on w3schools but can't find the solution.
Is it possible to change css positions audio mute button? i marked on this picture.
Edit: Do we have any chance to change video control's css and re-style them for our needs?
If not, what is best and light html5 video player we can stylise ?
ブラウザのネイティブ コントロールを使用している場合はそうではありません。ネイティブ コントロールを変更するアクセス権はありません。また、あったとしても、コントロールはブラウザー間で異なります。
ビデオをオーバーレイし、ネイティブ コントロールをオフにする独自のボリューム コントロールを構築できます。
または、HTML5 ビデオ プレーヤー(ビデオ用の JavaScript ライブラリ) を使用して、その CSS を変更することもできます。
html5 ビデオ タグには、コントロール バー用のいくつかの css オプションがあります。
たとえば、ミュート ボタンを非表示にする場合は、次のようにします。
video::-webkit-media-controls-mute-button {
display: none;
}
私が知っているすべてのcssオプションは次のとおりです。
video::-webkit-media-controls-panel {}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-volume-slider-container {}
video::-webkit-media-controls-volume-slider {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display {}
video::-webkit-media-controls-timeline-container {}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-seek-back-button {}
video::-webkit-media-controls-seek-forward-button {}
video::-webkit-media-controls-fullscreen-button {}
video::-webkit-media-controls-picture-in-picture-button {}
video::-webkit-media-controls-rewind-button {}
video::-webkit-media-controls-return-to-realtime-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-full-page-media::-webkit-media-controls-panel {}
などのブラウザー ベンダー固有の疑似要素セレクターを使用して、Shadow DOM に対処することで、ネイティブ コントロールのスタイルをある程度拡張できますが、video::-webkit-media-controls-panel@heff が言ったように、これらのコントロールはブラウザーによって異なり、独自のコントロールを構築すると、より多くのコントロールが提供されます。覚えておいてください: html[5] 動画は単なるvideoタグではありません。素敵な (JavaScript) API が付属しています。