Können HTML5-Untertitel mit CSS positioniert werden?

Question

Ich verwende eine benutzerdefinierte HTML5-App zum Streamen von Videos in einem lokalen Netzwerk, und jetzt füge ich Untertitel-Unterstützung hinzu.

Ich habe etwa 500 .vtt Untertitel von .srt konvertiert. Nachdem ich sie von .srt konvertiert habe, habe ich bemerkt, dass sie direkt am unteren Bildschirmrand angezeigt werden, und ich möchte, dass sie ein wenig haben.

Ich bin in der Lage, die Untertitel mit CSS-Pseudo-Element :: Cue, sondern nur für Schriftgröße, Farbe, Hintergrund. Scheint, keine Marge, Auffüllen oder Positionierungsregeln zu unterstützen.

Vor dem Codieren eines Skripts, um alle .vtt-Dateien zu ändern, um line:XX% zu den Cues hinzuzufügen (das ist der einzige Weg, den ich bisher gefunden habe, um sie zu verschieben), habe ich mich gefragt, ob es eine Möglichkeit gibt, die Untertitel zu positionieren alle .vtt Dateien.

Wenn ich meine benutzerdefinierten Steuerelemente deaktivieren und stattdessen die Standardsteuerelemente ausprobiert. Wenn ein Untertitel angezeigt wird und ich die Maus über das Video führe, um die Steuerelemente anzuzeigen, werden die Untertitel nach oben verschoben, und wenn die Steuerelemente nach ein paar Sekunden automatisch ausgeblendet werden, bleibt die Untertitelzeile an dieser Stelle. Aber die nächste Linie bewegt sich wieder nach unten. Das ist der Grund, warum ich mich wundere, wenn sie verschoben werden können, ohne die .vtt-Dateien zu bearbeiten, da das Zeigen der Steuerelemente sie nach oben bewegt, vielleicht gibt es eine Möglichkeit, wie ich es programmatisch machen kann.

Die Frage ist also, kann mit Hilfe von CSS oder andere andere Methode als die Modifizierung der .vtt Dateien .vtt Untertitel positioniert werden?

Dies ist die grundlegende Code, den ich für den Test bin mit:

<video controls autoplay> 
    <source src="http://192.168.0.1/video.mp4" type="video/mp4" /> 
    <track src="http://192.168.0.1/subtitles.vtt" kind="subtitles" srclang="en" label="English" default /> 
</video> 
<style> 
    video::cue { 
     font-size:100%; 
     color:white; 
    } 
</style> 

Answer 1

Dieser Link könnte nützlich sein, Positionswechsel Linie darin

http://ronallo.com/demos/webvtt-cue-settings/

Answer 2

Sie können die line- geben Höhe an die :: Cue, aber das Problem damit ist, wenn Untertitel in mehrere Zeilen geht dann die Lücke zwischen den Zeilen erhöht.