Styling native Google Chrome Videosteuerungen

Question

Hallo Ich bin müde von dem langweiligen Google Chrome nativen html5 Videoplayer Design.

Es wird immer schlimmer mit jeder Änderung.

Gerade jetzt ist es in einem hellen Weiß, das völlig unbefriedigend ist, wenn Sie mich fragen.

Also entschied ich mich, ein kleines Userstyle zu erstellen, um es dunkel zu machen.

So weit bin ich gekommen, aber es ist mir nicht möglich, die Farbe des kleinen Kreises zu ändern.

Jede Hilfe ist willkommen.

Dies ist mein eigentlicher Fortschritt:

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; 
} 

Hier ist der jsfiddle Link für sie.

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

Answer 1

Es gibt keinen CSS-Stil, die kleinen blauen Kreise in der gleichen Richtung wie Ihr Beispiel zu ändern; Das sind Bilder, die in Chrom verpackt sind. Vielleicht würde eine der css3-Bildfiltereigenschaften funktionieren.

Es gibt auch einen kleinen Vorbehalt diese Stile in der Regel zu überschreiben: sie sind intern Chrom und können jederzeit geändert werden. Seiten, die von ihnen abhängen, stellen möglicherweise fest, dass sie in einer zukünftigen Version von Chrome nicht auf dieselbe Weise funktionieren.

Wenn Sie möchten, dass Mediensteuerelemente mit einem benutzerdefinierten Aussehen auf Ihrer Seite aussehen, dann sollten Sie sich die vielen javascript media players ansehen, die Ihnen ein wenig mehr Flexibilität geben. Sie arbeiten auch über verschiedene Browser hinweg.

Answer 2

ich schließlich, wo ich (mehr oder weniger) durch Anlegen eines Filters auf die Mediensteuerung als Ganzes gehen wollte. Natürlich könnte man auch Filter auf jedem Pseudoelement der individuell Kontrollen gelten.

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>

* Hinweis: es ist an den Benutzer hersteller Präfixe an die CSS hinzufügen, wie

erforderlich

Answer 3

ich ohne Overlay bei der Positionierung der Kontrollen in einer Art und Weise gelang es dem Original-Video-Bildschirm von:

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

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

ausblenden Download-Button durch Hinzufügen:

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