ネイティブGoogle Chromeビデオコントロールのスタイル設定

Question

こんにちは私は、退屈な探してGoogle Chromeのネイティブhtml5ビデオプレーヤーのデザインにうんざりしています。

変更するたびに悪化しています。

今は明るい白ですが、私に尋ねると完全に不満です。

だから私はそれを暗くするために少しのユーザースタイルを作成することにしました。

これまでのところ私が来たのですが、小さなサークルの色を変更することはできません。

助けを歓迎します。

これは私の実際の進歩である：ここでは

video::-webkit-media-controls-panel { 
    background-color: #161618; 
} 

video::-webkit-media-controls-volume-slider-container { 
    background-color: cyan; 
} 

video::-webkit-media-controls-volume-slider { 
    background-color: #1FB2B0; 
} 

video::-webkit-media-controls-timeline { 
    background-color: #1FB2B0; 
} 

はそれのためにjsfiddleリンクです。

https://jsfiddle.net/cyc1j0nv/7/

Answer 1

あなたの例と同じ感覚で小さな青い丸を変更するには、任意のCSSスタイルはありません。それらはクロムにパッケージされた画像です。たぶんcss3画像フィルタのプロパティの1つが機能するでしょう。

一般的にこれらのスタイルをオーバーライドする小さな警告もあります。これらはクロムの内部にあり、いつでも変更される可能性があります。それらに依存するページは、将来のバージョンのChromeで同じように動作しないことがあります。

メディアコントロールをページ上でカスタム表示する場合は、多くの柔軟性を与える多くのjavascript media playersをご覧ください。また、さまざまなブラウザで動作します。

Answer 2

最終的には、メディアコントロール全体にフィルタを適用することで、どこかに行きたいと思っていました。もちろん、コントロールの各擬似要素にフィルタを個別に適用することもできます。

video::-webkit-media-controls{ 
 
    filter: hue-rotate(180deg) brightness(0.9); 
 
}

<h1>Styling video controls</h1> 
 
<video controls src="https://a.desu.sh/zflbzy.webm"><</video>

*注：私は、オーバーレイなしの方法で、元のビデオ画面をコントロールを配置することに成功し

Answer 3

を必要に応じてCSSにベンダープレフィックスを追加するには、ユーザー次第です：

video::-webkit-media-controls-enclosure { 
    overflow:hidden; 
    position: absolute; 
    bottom:-32px 
} 

video::-webkit-media-controls-panel { 
    display: flex !important; 
    opacity: 1 !important; 
} 

隠すダウンロードボタン追加して：

video::-internal-media-controls-download-button { 
    display:none; 
} 
video::-webkit-media-controls-panel { 
    width: calc(100% + 30px); 
}