HTML5 Spur Bildunterschriften nicht angezeigt

Ich versuche, die einfachste html5-Video-Player in der Welt zu machen:HTML5 Spur Bildunterschriften nicht angezeigt

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>ST Media Player</title> 
    </head> 
    <body> 
     <video id="player" src="http://video-js.zencoder.com/oceans-clip.mp4" controls> 
      <track kind="captions" src="_tracks/test.vtt" default> 
     </video> 
    </body> 
</html>

Fertig!

Nun, warum erkennt der Player, dass es Untertitel gibt, aber zeigt sie nicht? Ich habe jetzt verschiedene Video- und Untertitel-Dateien ausprobiert.

Quelle

2013-03-07 Thomas Teilmann

Track-Tag funktioniert, wenn Ihr Inhalt auf einem Webserver bereitgestellt wird. Vergessen Sie auch nicht, eine Konfiguration hinzuzufügen, die den MIME-Typ als vtt-Datei festlegt. Hier ist mein Beispiel, das auf IIS funktioniert:

<video> 
    <source src="video.mp4" type="video/mp4" /> 
    <track src="video.en.vtt" kind="subtitles" 
     label="English Subtitles" srclang="en" /> 
</video>

Für IIS Web.Config Datei:

<configuration> 
    <system.webServer> 
     <staticContent> 
     <remove fileExtension=".vtt" /> 
     <mimeMap fileExtension=".vtt" mimeType="text/vtt" /> 
     </staticContent> 
    </system.webServer> 
</configuration>

Für Tomcat Server WEB-INF/web.xml Datei:

<web-app> 
    <mime-mapping> 
    <extension>vtt</extension> 
    <mime-type>text/vtt</mime-type> 
    </mime-mapping> 
</web-app>

Für Apache Server hinzufügen .htaccess Datei in Ihr Web-Verzeichnis, und schreiben Sie diese Zeile, um Untertitel MIME-Typ hinzuzufügen:

AddType text/vtt .vtt

Quelle

2013-03-07 10:35:16 Canavar

Wo kann ich die Config auf meiner Web-Server? –

@ThomasTeilmann: Ist dein Webserver IIS? Wenn dies der Fall ist, sollten Sie eine web.config-Datei in den Stammordner einfügen und die config darin einfügen. – Canavar

Was ist mit Apache Server? – bakriawad

Stellen Sie sicher, dass Sie Ihre Datei als UTF-8 gespeichert wird, um sicherzustellen, dass Sonderzeichen

Quelle

2013-12-08 00:44:11 caraya

und der MIME-Typ sollte charset haben konfigurieren: < "VTT" MimeMap fileextension = mimt = "text/VTT; charset = UTF-8" /> –

richtig gut angezeigt wird, wenn Sie Chrome verwenden, stehen die Chancen, dass Sie es vom Terminal starten müssen, und type --disable-web-security, für linux, ... mehr unter Disable same origin policy in Chrome

Quelle

2015-11-18 09:35:25 programmer44

Ich habe keine Antwort dafür, bin aber zu dem Schluss gekommen, dass es sich um ein Server-Einstellungs-Problem handelt. Die Beschriftungen in IE funktionieren einwandfrei auf IIS, aber nicht auf Nginx-Server, wenn mit IE als Client angezeigt wird.

Quelle

2017-04-10 19:28:21 pelicanpaul

Da Sie relevant und wahrscheinlich hilfreiche Informationen aber keine Antwort, ich würde vorschlagen, diese Information als Kommentar zu der Frage anstatt einer Antwort zu veröffentlichen. Vielen Dank! –

Entschuldigung. Verwendung von Stack Overlow – pelicanpaul

Sie müssen die mode des textTracks Objekt auf „zeigt“:

var video = document.querySelector('YOUR_VIDEO_SELECTOR'); 

video.addEventListener('load', function() { 
    var tracks = video.textTracks[0]; 
    tracks.mode = 'showing'; 
});

Quelle

2017-07-13 17:52:10

HTML5 Spur Bildunterschriften nicht angezeigt

Antwort

Verwandte Themen