Sie können die html5 Audio/Video-Kontrollen mit css Stil, hier ein Beispiel:
HTML Markup
<div id="video-controls" class="controls" data-state="hidden">
<button id="playpause" type="button" data-state="play">Play/Pause</button>
<button id="stop" type="button" data-state="stop">Stop</button>
<div class="progress">
<progress id="progress" value="0" min="0">
<span id="progress-bar"></span>
</progress>
</div>
<button id="mute" type="button" data-state="mute">Mute/Unmute</button>
<button id="volinc" type="button" data-state="volup">Vol+</button>
<button id="voldec" type="button" data-state="voldown">Vol-</button>
<button id="fs" type="button" data-state="go-fullscreen">Fullscreen</button>
</div>
Grund Styling
Die HTML-Video und ihre Kontrollen sind alle enthalten in einem Element, das eine maximale Breite und Höhe hat (basierend auf den Dimensionen des Videos innerhalb der Seite verwendet wird) und zentriert:
figure {
max-width:64rem;
width:100%;
max-height:30.875rem;
height:100%;
margin:1.25rem auto;
padding:1.051%;
background-color:#666;
}
Das Video steuert Behälter selbst benötigt auch Styling, so dass es die richtige Art und Weise eingerichtet ist:
.controls {
width:100%;
height:8.0971659919028340080971659919028%; /* of figure's height */
position:relative;
}
audio {
background-color: #95B9C7;
/*etc...*/
}
SRC:
- https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics
- https://stackoverflow.com/a/33948255/797495
IE
Chrome
es sind nur Standardversionen, aber Sie können auch Plugins dafür verwenden oder Sie können das Design selbst ändern –
Für "warum" würde es scheinen die IE Entwickler wurden verpflichtet, die für Metro Apps festgelegten Standards zu befolgen. Ist das die eigentliche Frage oder fragst du wirklich, wie du sie ändern kannst? – Affe
@Affe, realistisch frage ich, wie man es ja ändert. Danke für die Einsicht, schätzen Sie es. – JarrodOliver