Wie entferne ich das folgende HTML5-Videoelement-Steuerelement in Firefox?

Question

Ich bin ein Problem in Firefox, die speziell wo meine Elemente, bevor gespielt wird, haben eine hellgraue Play-Taste Overlay über das Plakat Attribut Bild:

Versus in Chrome und IE, wo der Spieler erscheint als so:

Mein HTML ist einfach:

main { 
 
    width: 75%; 
 
    height: 700px; 
 
    padding-right: 1.9%; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
video { 
 
    margin-left: 9.2%; 
 
    margin-top: 11%; 
 
    border: 4px solid black; 
 
    object-fit: initial; 
 
} 
 

 

 
/*Causes the poster to not leave gaps between itself and the border*/

<video id="video" width="768" height="432" poster="img/main/intro1poster.png" controls> 
 
     <source src="media/videos/intro1.mp4" type="video/mp4"> 
 
     <p>Your browser doesn't support HTML5 video or Flash. 
 
      A low quality version of the video can be found here: <br/> 
 
      <a href="https://www.youtube.com/watch?v=BDw7xpzH-68">Dev Update #1</a></p> 
 
</video>

Diese Frage wurde vor in 1 anderen Thread 2 Jahre gefragt (How to remove the gray overlay on top of the Video in firefox using the new HTML5 <video>?), die ich finden kann, aber keine Lösung wurde jemals vorgestellt. Ich bin bereit, JavaScript in der Lösung zu verwenden, aber ich möchte die Steuerelemente nicht vollständig neu entwerfen.

Answer 1

Dies ist die Standardsteuerungsoberfläche von Firefox. Wir haben noch keine Möglichkeit, es selbst in diesem Browser zu ändern, so dass Sie zwei Optionen gebunden:

• Create your own controls UI.
  Dies ermöglicht Ihnen eine konsistente und vollständig anpassbare Benutzeroberfläche für alle Browser.

• Verwendung einiger Hacks, die in Zukunft (oder sogar in Vergangenheit) brechen kann

Hier ist ein solcher Hack, dass ich nur 54 auf FF getestet:

Diese Überlagerung verschwindet, wenn Sie beginnen das Video abspielen.
Indem wir das Attribut autoplay des Videos setzen, können wir es dann loswerden. Aber Sie müssen so schnell wie möglich die pause() Methode aufrufen, um das eigentliche Abspielen des Videos zu vermeiden.

// pause it as soon as possible 
 
document.getElementById('video').pause();

video { 
 
    margin-left: 9.2%; 
 
    margin-top: 11%; 
 
    border: 4px solid black; 
 
    object-fit: initial; 
 
}

<video id="video" width="768" height="432" poster="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/John_William_Waterhouse_A_Mermaid.jpg/800px-John_William_Waterhouse_A_Mermaid.jpg" controls autoplay> 
 
    <!-- simply added 'autoplay' attribute --> 
 
    <source src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4" type="video/mp4"> 
 
</video>