web-dev-qa-db-ja.com

デフォルトのhtml5ビデオスキン/カラーを変更することは可能ですか？

デフォルトのhtml5ビデオプレーヤーの色または完全なスキンを変更することは可能ですか？

<video id="sampleMovie" src="HTML5Sample.mov" controls></video>

enter image description here

htmlvideocolorstagsskin
11
Johnny

ブラウザのネイティブHTML5ビデオコントロールのスキンを変更する方法はありません。ただし、（controls属性を削除することで）それらを完全に省略し、HTML、CSS、およびHTMLビデオAPIを使用して独自のコントロールを実装することができます（参考文献 ここ ）。

ガイドはこちら があります。

17
net.uk.sweet

はい、ブラウザがシャドウDOMをサポートしている場合はそうです。その場合、次のようなcssでテーマを設定するためのセレクターを使用できます。

*::-webkit-media-controls-panel {
   background-color: red !important;
}

そして他の多くの疑似属性。それで遊ぶために、あなたは「ユーザーエージェントのシャドウDOMを表示する」を有効にすることによってクロームのシャドウDOMを調べることができます：

開発者ツール->設定->設定->ユーザーエージェントのシャドウDOMを表示

3
Ignacio Vazquez

メディアコントロールスタイルは、シャドウドームの奥深くでしか利用できないということです。ここにリストがあります： https://Gist.github.com/afabbro/3759334

メインスレッドとコメントも見てください。彼らはこれらを多かれ少なかれ最新の状態に保っています。つまり、それはあなたにとって良い使い方になるかもしれませんが、そうではないかもしれませんが、この種のスタイリングにはある程度のサポートがあることを知ってうれしいです。

ブラウザでシャドウDOMを調べて、シャドウ要素に追加されたクラスを確認できることに注意してください。ただし、「-webkit」というプレフィックスが付いたクラスのみを編集できます。

1
Allan Lima

htmlは、ブラウザの言語です。スキンのデフォルトのhtml5を変更したい場合は、ブラウザを作成する必要があります。

この解決策は、html + css + js/swfから手動でビデオプレーヤーを作成する必要があり、私の指示を使用する場合を除いて、不可能に変更すると思います。

0
Abdul Aziz Al Basyir