“BANNED.VIDEO"や"BIT CHUTE"の動画に文字起こし字幕をつける試みを続けていますが、話者が複数の時どう区別するか、工夫が必要になってきました。
テキサスのドクターの「自称COVIDワクチン」に警鐘をならす動画がきっかけで英語動画の文字起こしと字幕づけを始めました。当初は話者が単独なので気にしなかったのですが、最近の動画では対談や他の動画からの引用など、メインの話者以外の音声も混ざったものが多くなりました。
画面の字幕を見ている分には話者の区別はそれほど気になりませんが、出来上がった英文の和訳文章を読む時、誰が話してるのかを示す目印がないと、内容を追うのに不便なことがわかりました。
試しに話し手の名前や役割を文字起こし文の中に入れてみましたが、これは文字数が多くなり字幕文の読みやすさを損ないます。
そこで、せっかくWebVTT形式の字幕だもの、スタイルで色分けしたらどうか？と思いつきました。
やりたいこと
二人の登場人物が会話しています。スタイルづけでジョン・リースの部分をグリーンイエロー、ライオネル・ファスコの部分をミスティローズで表示したいと思います。まずはスタイルなしのサンプル動画：
VTTの中身は以下のようになっています。
WEBVTT
1
00:00:11.659 --> 00:00:13.883
How's your arm?
2
00:00:14.660 --> 00:00:17.596
Gonna take more than a bullet to keep me down.
3
00:00:18.654 --> 00:00:21.417
It's time we had a talk, Lionel.
4
00:00:24.916 --> 00:00:28.477
So what are we doing here?
You're not gonna propose to me, are you?
5
00:00:28.477 --> 00:00:29.817
Give me your phone.
6
00:00:30.680 --> 00:00:32.084
Why?
7
00:00:32.796 --> 00:00:34.459
What the hell'd you do that for?
8
00:00:35.970 --> 00:00:39.726
You never know who might be listening.
It wasn't even turned on.
9
00:00:41.842 --> 00:00:43.634
What's going on?
10
00:00:45.599 --> 00:00:47.974
Those questions you've been asking,
11
00:00:48.752 --> 00:00:51.083
you deserve answers.
<video>の::cueを使ったスタイルづけ
疑似要素に色指定をして、リースとファスコを色別で表示することはChromeは、パソコンでもスマホでもきれいに出来ました。（Apple, Windowsを持っていないのでそれらのブラウザでのテストはしていません。）
しかしFirefoxでは、mozillaのディベロッパーページに疑似要素を使ってスタイルがつけられると書いてあるのに、のぞみ通りの動作をしてくれません。
You can style WebVTT cues by looking for elements which match the ::cue pseudo-element.
どうやら対応が遅れているようです。2020年９月20日時点でのBugzillaの投稿によると、
Some heads-up here:
We did support using ::cue in document (bug 1318542), which is pseudo element, but did NOT support using that directly from vtt files (bug1321490) and using cue selector (bug1321489).
We did NOT support ::cue-region and its selector (bug1338031).
We did NOT support pseudo class, such as :past, :future (bug865401).
まだセレクタに対応していないようなのです。つまり、Firefoxで話者別に色付けした字幕を出すのは今のところ「できない」という結論です。
でも、VTT内で話者を区別するクラス名を入れておいても表に出てこないので、そこは助かります。後で原文と和訳の対照表を作る時、色で話し手を区別できるからです。
ということでスタイルつきの字幕はこちら。
スタイルとVTTを変更しました。
<style>
video::cue(c.Reese) { color:greenyellow;}
video::cue(c.Lionel) { color:mistyrose; }
</style>
WEBVTT
1
00:00:11.659 --> 00:00:13.883
<c.Reese>How's your arm?</c>
2
00:00:14.660 --> 00:00:17.596
<c.Lionel>Gonna take more than a bullet to keep me down.</c>
3
00:00:18.654 --> 00:00:21.417
<c.Reese>It's time we had a talk, Lionel.</c>
4
00:00:24.916 --> 00:00:28.477
<c.Lionel>So what are we doing here?
You're not gonna propose to me, are you?</c>
5
00:00:28.477 --> 00:00:29.817
<c.Reese>Give me your phone.</c>
6
00:00:30.680 --> 00:00:32.084
<c.Lionel>Why?</c>
7
00:00:32.796 --> 00:00:34.459
<c.Lionel>What the hell'd you do that for?</c>
8
00:00:35.970 --> 00:00:39.726
<c.Reese>You never know who might be listening.</c>
<c.Lionel>It wasn't even turned on.</c>
9
00:00:41.842 --> 00:00:43.634
<c.Lionel>What's going on?</c>
10
00:00:45.599 --> 00:00:47.974
<c.Reese>Those questions you've been asking,</c>
11
00:00:48.752 --> 00:00:51.083
<c.Reese>you deserve answers.</c>
