Warum wird das html5 <audio> Tag auf Chrome und IE anders angezeigt?

Question

Es sieht sauber und klein in Chrom und groß und anstößig in IE. Sehen Sie die zwei Screenshots unten .. Irgendwelche Ideen? Gibt es mp3-Hosting-Sites, die eine einbetten Option haben, die so etwas wie die zweite Option (Chrom-Anzeige)

IE

Chrome

EDIT aussieht: Wie kann ich den IE einen Blick mehr machen wie die Chromversion? Gibt es jemanden, der Hosting-Websites kennt, die ähnliche Designs wie die Chrome-Version enthalten?

Answer 1

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:

1. https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics
2. https://stackoverflow.com/a/33948255/797495