動画コンテンツの字幕はどうやって実現しているのか

taroro

気になったので調べてみる。

WebVTTというフォーマットが主流のよう。
規格はW3Cによって標準化されている。
https://en.wikipedia.org/wiki/WebVTT

以前はSubRip(.srt)というフォーマットだったみたい。

https://en.wikipedia.org/wiki/SubRip

taroro

ファイルフォーマットはこんな感じ

WebVTT

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:900000,LOCAL:00:00:00.000

00:00:07.966 --> 00:00:09.801
[description]

00:00:15.890 --> 00:00:17.934
-[description]
-[description]

00:00:23.273 --> 00:00:24.816
-[description]
-[description]

SubRip

1
00:00:07,966 --> 00:00:09,801
[description]

2
00:00:15,890 --> 00:00:17,934
-[description]
-[description]

3
00:00:23,273 --> 00:00:24,816
-[description]
-[description]

taroro

字幕をつけるには単純に下記のようなコードでできるみたい

    <video id="myVideo" controls>
        <source src="path/to/your/video.mp4" type="video/mp4">
        <!-- WebVTT字幕ファイルを指定 -->
        <track label="Japanese" kind="subtitles" srclang="ja" src="path/to/your/subtitles.vtt" default>
    </video>

taroro

WebVTTの使用はMDNに記載があった

taroro

(間違えているかも)

ハイフン
2人以上の話者が同じ時間に会話している場合に表現する。

00:01:20.000 --> 00:01:24.000
- John: こんにちは！
- Mary: こんにちは、ジョン！

ハイフンなしで改行している場合は、1人の話者のセリフを表現している。

00:01:20.000 --> 00:01:24.000
こんにちは、ジョン！
元気だった？

かっこ
物音などを表現する

00:01:25.000 --> 00:01:30.000
[ドアが開く音]
John: 誰かが来たようだ。