HTML Untertitel im Video einfügen

OhneKonservierungsstoffe · 23.10.15, 19:20

Hallöchen,

folgender Code sollte eigentlich einen Untertitel in mein Video einfügen, tut er aber nicht. Weiß jemand warum?

HTML

Code:

<!doctype html>
<html lang="de">
  <head>
    <title>Video</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <video width="480" style="border: 5px solid black"; controls>
      <source src="Varanasi.ogv" type="video/ogg">
      <source src="Varanasi.webm" type="video/webm">
      <source src="Varanasi.mp4" type="video/mp4">
      <track src="untertitel.vtt" kind="subtitles" srclang="de" label="Deutsch">
    Ihr Webbrowser unterstützt das video-Tag nicht.
    </video>
  </body>
</html>

VTT

Code:

WEBVTT

1
00:00:01.000 --> 00:00:05.000
Die <i>erste Zeile</i> von Text wird die ersten 5 Sekunden angezeigt

2
00:00:06.000 --> 00:00:16.000
Eine zweite Zeile wird jetzt
für <b>10 Sekunden</b> angezeigt.

3
00:00:17.000 --> 00:00:20.000
Video wird jetzt beendet ...

Bin sehr gespannt auf eure Antworten, vielen Dank.

Client70 · 24.10.15, 12:12

Habs selber ausprobiert die Zeile sollte nur ein zusätzliches default enthalten also so:

<track src="untertitel.vtt" kind="subtitles" srclang="de" label="Deutsch" default>

bei mir klappts dann zumindest im firefox, wichtig ist auch das das vtt document utf-8 ist.

OhneKonservierungsstoffe · 25.10.15, 08:47

Hallo, deine Änderung bewirkt bei mir leider nur, dass der CC Button verschwindet

Client70 · 25.10.15, 11:31

Merkwürdig hier mal mein Code:

Code:

<!doctype html>
<html lang="de">
  <head>
    <title>Video</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <video width="480" style="border: 5px solid black"; controls>
      <source src="video/Mix (720p).mp4" type="video/mp4">
      <track src="untertitel.vtt" kind="subtitles" srclang="de" label="Deutsch" default>
    Ihr Webbrowser unterstützt das video-Tag nicht.
    </video>
  </body>
</html>

und noch die vtt (Encoding wichtig auf utf-8 ) einstellen sonst gehts auch nicht:

Code:

WEBVTT

1
00:00:01.000 --> 00:00:05.000
Die <i>erste Zeile</i> von Text wird die ersten 5 Sekunden angezeigt

2
00:00:06.000 --> 00:00:16.000
Eine zweite Zeile wird jetzt
fuer <b>10 Sekunden</b> angezeigt.

3
00:00:17.000 --> 00:00:20.000
Video wird jetzt beendet ...

Aber ich seh da keinen Unterschied mehr im Code (nur das ü im vtt unter 2 bei "für" habe ich noch geändert weil dort ne Zahlencombi stand als ich es in utf 8 umwandelte scheinbar vom ANSI Code - aber ich glaube eher nicht das es das sein kann).Der Code läuft wie gesagt im Firefox bei mir problemlos, InternetExplorer ebenfalls.
Wie gerade festgestellt Google Chrome hat aber ein Problem mit dem Code, zeigt gar nix an.

OhneKonservierungsstoffe · 26.10.15, 15:37

Also ich habe den Code jetzt mal in Edge ausprobiert und da klappt es. In Chrome und Opera verschwindet der CC Button nach anklicken einfach ohne eine Wirkung zu hinterlassen und in Firefox habe ich den Button gar nicht erst.

Browser sind alle aktuell. Komisch komisch.

Naja wenigstens weiß ich jetzt sicher, dass der Code auch wirklich stimmt. Dankeschön erstmal.