Wie formatiert man Textspuren in HTML5-Video über CSS?

Question

Ist es möglich, Textspuren (wie Untertitel und Untertitel) in HTML5-Videoplayern zu formatieren?

Ich fand schon einen Weg so für Chrome zu tun:

video::-webkit-media-text-track-container { 
    // Style the container 
} 

video::-webkit-media-text-track-background { 
    // Style the text background 
} 

video::-webkit-media-text-track-display { 
    // Style the text itself 
} 

Dies scheint Safari ein wenig zu verwirren. Es funktioniert, aber das Rendering ist ziemlich fehlerhaft.

Aber noch wichtiger: Wie erreicht man dies für Firefox und IE?

Answer 1

Dies ist für Chrom arbeiten,

video::-webkit-media-text-track-container { 
    // Style the container 
} 

video::-webkit-media-text-track-background { 
    // Style the text background 
} 


video::-webkit-media-text-track-display { 
    // Style the text itself 
} 

Sie können auch einige Informationen aus diesen Links.

Link 1

Link 2

Answer 2

verwenden für Chrome:

video::cue { 
    // add style here 
} 

Firefox:

noch nicht unterstützt. Öffnen Fehler implementieren :: Stichwort Pseudo-Element - https://bugzilla.mozilla.org/show_bug.cgi?id=865395

Edit:
Unterstützung für FireFox verfügbar ist, funktioniert es ähnlich wie es in Chrome und Opera tut. Aber Support ist noch nicht für Edge oder IE verfügbar.

Answer 3

Die einzige browserübergreifende Lösung, die ich gefunden habe, ist: Verstecken Sie die Textspuren des Videos und verwenden Sie Ihre eigenen.

Damit können Sie Ihre eigenen Textknoten mit Klassen, IDs usw. erstellen, die dann einfach über CSS formatiert werden können.

Dazu würden Sie die Methoden onenter und onexit der Text-Cues verwenden, um eigene Textknoten zu implementieren.

Answer 4

Ich möchte meine Untertitel so gestalten, dass sie einen schwarzen Hintergrund haben und unter dem Video für Safari und Chrome positioniert werden. Ich habe Erfolg mit dem folgenden Code kombiniert mit dem Bearbeiten der .vtt-Datei mit den folgenden Stilen erreicht. Beachten Sie die Stile der .vtt Datei oder auch in Safari hinzufügen müssen Ihre Bildunterschriften um springt, wenn die Video-Steuerelemente (auch wenn sie versteckt) erscheinen würde:

4 
00:00:09.980 --> 00:00:12.640 line:13 position:50% align:middle 
size:100% 
for just the summer but I ended up staying here. 

Styles für Chrome und Safari Bildunterschriften:

Chrome verwendet die video :: cue Hintergrundfarbe und Deckkraft.

video::cue { 
    opacity: 1; 
    background-color: black; 
    font-size: 20px !important; 
} 

Safari verwendet -webkit-media-text-track-display-backdrop für seine Hintergrundfarbe. Beachten Sie das! Wichtig, das das inhärente Styling von Safari außer Kraft setzt.

video::-webkit-media-text-track-display-backdrop { 
    background-color: black !important; 
    overflow: visible !important; 
} 

Die folgende Webkit-media-Text-Spur-Anzeige Überlauf wird für mehr Polsterung um Titeltext Chrome erlauben:

video::-webkit-media-text-track-display { 
    overflow: visible !important; 
} 

Überlauf sichtbar ist wichtig, sich auf den folgenden Code für Safari und ich bin Einstellen der Beschriftungen unter dem Video mit der Transformation, die auf einer festen Schriftgröße abhängig ist:

video::-webkit-media-text-track-container { 
overflow: visible !important; 
transform: translateY(30%) !important; 
}