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

问题描述 投票:0回答:1

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

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

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

[它在Firefox(Win,Mac,Android,iOS),歌剧(Win,Mac),Chrome(Win,Mac,Android,iOS,iOS),MS Edge(Win)和野生动物园(Mac,iOS)上都可以正常工作。

现在,我想为视频添加字幕。现在,您不能使用SubRipText(.srt)文件,因为没有浏览器支持它,而是大多数最近的浏览器都使用WebVTT格式。它与SRT非常相似,因此我使用python脚本从SRT生成WebVTT文件。我很确定我产生了有效的WebVTT代码。我使用了验证器,研究了WebVTT的正式规范,甚至查看了一些有关如何正确制作WebVtt文件的教程。使用video元素内的track标签,您可以如下指定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上看到字幕,即字幕是德语的(label =“ Deutsch”),它允许我选择它们。但是,除了macOS上的safari之外,没有其他浏览器会将字幕显示为叠加在视频上。我已经在网络浏览器上查找了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.

无法确定为什么除了在野生动物园外没有显示。是什么原因造成的?你看到我做错了什么吗? WebVTT有效且HTML代码易于实现。

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

html local mp4 webvtt
1个回答
0
投票

很高兴有这么多人帮助。我终于弄清楚了为什么浏览器不会显示字幕。当将HTML本地存储在硬盘驱动器上并在浏览器中打开它时,除了Edge和Safari(在Mac OS上)外,它不显示字幕。但是,当html位于网络服务器上时,它突然可以在所有浏览器上运行。不要问我为什么他们要那样做。

编辑:刚刚发现:Viewing HTML5 video with captions offline有很多方法可以使字幕生效。

© www.soinside.com 2019 - 2024. All rights reserved.