2
votes

I hope that belongs to stackoverflow, if not than I'm sorry. 1st question on a stackexchange page

I have currently a project running, where I need to play MP4 videos. I first thought I'll code a player in C++ using wxWidgets, but then I thought why not just using the web browser. Everyone does have one, and a high percentage of users have browsers with HTML5 support. With the HTML video tag, you can embed a MP4 video on a HTML site in a .html file that is locally stored on the filesystem. Not a problem right know, I am able to embed the video with

<video width="1280" height="720" controls autoplay>
    <source src="somefile.mp4" type="video/mp4">
</video>

It plays fine on firefox (win, mac, android, ios), opera (win, mac), chrome (win, mac, android, ios), ms edge (win) and safari (mac, ios).

Now I wanted to add subtitles to the video. Now, you cant use SubRipText (.srt) files because no browser supports it, instead mostly all recent browsers use the WebVTT format. It's very similar to SRT, so I used a python script to generate WebVTT files from SRT. Im pretty sure I produced valid WebVTT code. I used validators, looked into the official specification of WebVTT, even viewed some tutorials on how WebVtt files are being correctly made. With the track tag inside the video element you can specify your WebVTT subtitle file as follows:

<video width="1280" height="720" controls autoplay>
    <source src="somefile.mp4" type="video/mp4">
    <track default src="somefile.vtt" kind="captions" srclang="de" label="Deutsch">
</video>

Most of the web browsers HTML5 players can see that I added a WebVTT subtitle file, and I can see on safari, firefox, edge and ie that the subtitles are in german (label="Deutsch") and it lets me select them. However, no browser except safari on macos do show the subtitles as overlay on the video. I have looked up the WebVTT support on web browsers and all common browsers support it since ages.

The WebVTT looks like this:

WEBVTT

1
00:00:00.833 --> 00:00:04.464
Bevor ich in die Details zu C++17 einsteige,

2
00:00:04.465 --> 00:00:09.342
möchte ich Ihnen erst mal einen Überblick geben zur Historie von C++.

3
00:00:09.343 --> 00:00:14.823
C++ ist eine ziemlich alte Sprache, mittlerweile an die 40 Jahre alt.

4
00:00:14.824 --> 00:00:19.990
Wenn Sie sich die Zeitlinie hier anschauen, sehen Sie, das seit C++11,

5
00:00:19.991 --> 00:00:23.849
wir alle drei Jahre einen neuen C++-Standard bekommen.

6
00:00:23.850 --> 00:00:26.709
Doch was ist in C++98 drin?

7
00:00:26.710 --> 00:00:33.403
Mit C++98 bekam C++ Templates, das heißt generische Programmierung,

8
00:00:33.404 --> 00:00:38.050
auf der die Standard Template Library basiert, mit ihren Containern

9
00:00:38.051 --> 00:00:39.448
und Algorithmen.

10
00:00:39.449 --> 00:00:44.610
Natürlich hat C++ auch Strings und I/O-Streams für die Ein- und Ausgabe.

11
00:00:44.611 --> 00:00:50.064
C++11 war der zweite große, richtige C++-Standard.

12
00:00:50.065 --> 00:00:54.126
In diesem Standard gibt es auf Ebene der Kernsprache Move Semantik;

13
00:00:54.127 --> 00:00:57.508
die vereinheitlichte Initialisierung mit geschweiften Klammern;

14
00:00:57.509 --> 00:01:02.097
automatische Typableitung in der Form von auto und decltype;

15
00:01:02.098 --> 00:01:05.463
Lambda-Funktionen aus der funktionalen Programmierung

16
00:01:05.464 --> 00:01:07.383
und constexpr.

17
00:01:07.384 --> 00:01:10.439
constexpr bedeutet, dass Sie Variablen,

18
00:01:10.440 --> 00:01:13.072
Funktionen und auch benutzerdefinierte Typen

19
00:01:13.073 --> 00:01:16.659
zur Compile-Zeit instanziieren können.

20
00:01:16.660 --> 00:01:21.602
Darüber hinaus unterstützt C++11 Multithreading und besitzt

21
00:01:21.603 --> 00:01:22.821
ein Speichermodell.

22
00:01:22.822 --> 00:01:28.053
Das heißt, C++11 erlaubt Ihnen das erste Mal, mehrere Kerne

23
00:01:28.054 --> 00:01:32.284
mit der standardisierten C++-Schnittstelle anzusprechen.

24
00:01:32.285 --> 00:01:37.557
Mit C++11 haben wir aber auch einige neue Bibliotheken bekommen,

25
00:01:37.558 --> 00:01:40.890
insbesondere Bibliotheken für reguläre Ausdrücke;

26
00:01:40.891 --> 00:01:45.302
für Smart Pointer; Hashtabellen, auch bekannt als Dictionaries,

27
00:01:45.303 --> 00:01:47.379
und std::array.

28
00:01:47.380 --> 00:01:49.645
Was ist mit C++14 passiert?

29
00:01:49.646 --> 00:01:50.705
Nicht so viel.

Cannot figure out why it is not showing up except on safari. What could cause this? Do you see anything I do wrong? The WebVTT is valid and the HTML code pretty simple to implement.

VideoLan media player (VLC) is able to read my WebVTT files without any problems and displays them nicely.

1

1 Answers

1
votes

Glad, that so many people helped. I finally figured out why browsers won't display subtitles. When having the HTML locally on the harddrive and I open it in an browser, It doesn't display subtitles except for Edge and Safari (on mac OS). But when the html is on a webserver it suddenly does work on all browsers. Don't ask me why they made it like that.

Edit: just found this: Viewing HTML5 video with captions offline is has many approaches to get subtitles working.