HTML5本地播放带字幕的MP4视频

Question

我希望属于 stackoverflow，如果不是我很抱歉。 stackexchange 页面上的第一个问题

我目前有一个项目正在运行，我需要在其中播放 MP4 视频。我首先想到我将使用 wxWidgets 在 C++ 中编写一个播放器，但后来我想为什么不只使用 Web 浏览器。每个人都有一个，而且很大一部分用户的浏览器支持 HTML5。使用 HTML 视频标签，您可以将 HTML 站点上的 MP4 视频嵌入到本地存储在文件系统中的 .html 文件中。没问题，我可以嵌入视频

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

它在 firefox (win, mac, android, ios), opera (win, mac), chrome (win, mac, android, ios), ms edge (win) 和 safari (mac, ios) 上运行良好。

现在我想为视频添加字幕。现在，您不能使用 SubRipText (.srt) 文件，因为没有浏览器支持它，大多数最新的浏览器都使用 WebVTT 格式。它与 SRT 非常相似，因此我使用 python 脚本从 SRT 生成 WebVTT 文件。我很确定我生成了有效的 WebVTT 代码。我使用了验证器，查看了 WebVTT 的官方规范，甚至查看了一些关于如何正确制作 WebVtt 文件的教程。使用视频元素内的轨道标签，您可以按如下方式指定 WebVTT 字幕文件:

<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>

大多数 HTML5 播放器的网络浏览器都可以看到我添加了一个 WebVTT 字幕文件，我可以在 safari、firefox、edge 和 ie 上看到字幕是德语的(label="Deutsch")，它让我选择他们。但是，除了 macOS 上的 safari 浏览器外，没有其他浏览器会将字幕显示为覆盖在视频上。我查看了 Web 浏览器对 WebVTT 的支持，所有常见的浏览器都支持它很久了。

WebVTT 看起来像这样:

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.

无法弄清楚为什么除了在 safari 上它没有出现。什么会导致这个？你看到我做错了什么吗？ WebVTT 是有效的，HTML 代码实现起来非常简单。

VideoLan 媒体播放器 (VLC) 能够毫无问题地读取我的 WebVTT 文件并很好地显示它们。

Answer 1

很高兴，有这么多人帮忙。我终于弄明白为什么浏览器不显示字幕了。当在硬盘驱动器上本地放置 HTML 并在浏览器中打开它时，它不显示字幕，但 Edge 和 Safari(在 mac OS 上)除外。但是当 html 在网络服务器上时，它突然在所有浏览器上都可以工作。不要问我为什么他们会那样做。

编辑:刚刚发现这个:Viewing HTML5 video with captions offline有很多方法可以使字幕正常工作。