HTML5 video & Closed Captions

Video code


<video lang="fr-ca" controls preload="metadata" onloadstart="this.volume=0.2">

<source src="/wp-content/uploads/2020/01/district31.mp4" type="video/mp4">
<source src="/wp-content/uploads/2020/01/district31.webm" type="video/webm">
<source src="/wp-content/uploads/2020/01/district31.ogv" type="video/ogg">

<!-- Offer closed captions -->
<track label="Français canadien pour les malentendants" kind="captions" srclang="fr-ca" src="/wp-content/uploads/2020/01/cc-district31-fr-ca.vtt" default="">
<track label="English for the hearing-impaired" kind="captions" srclang="en-en" src="/wp-content/uploads/2020/01/cc-district31-en-uk.vtt">
</video>

<figcaption>x-platform html5 video player alongside closed captions</figcaption>

</figure>

Styles code


Within the css
video::cue {
background-color: rgba(0,0,0,.5);
color: rgba(255,255,255,1);
}

Within de WebVTT file
STYLE
::cue {
background-color: rgba(0,0,0,.5);
color: rgba(255,255,255,1);
}

WebVTT code


WEBVTT - en-uk closed captions

STYLE
::cue {
background-color: rgba(0,0,0,.5);
color: rgba(255,255,255,1);
margin: 2px;
}

00:00:00.000 --> 00:01:01.130 line:0 size:100% align:middle
[musique instrumentale en fond sonore]

00:00:00.550 --> 00:00:01.480 line:-1 size:100% align:middle
Ça c'est l'mauvais hein.

00:00:01.480 --> 00:00:02.930 line:-1 size:100% align:middle
Ouais il a vu ça d'hier.

00:00:02.930 --> 00:00:04.500 line:-1 size:100% align:middle
Qu'est-ce qu'il est venu faire ici Brière?

00:00:04.500 --> 00:00:06.420 line:-1 size:100% align:middle
Il nous a donné un coup de main avec l'enlèvement du petit bébé là.

00:00:06.420 --> 00:00:09.890 line:-1 size:100% align:middle
Une interview, les parents insistent et on lui a aussi transmis les informations d'usage.

00:00:10.210 --> 00:00:12.720 line:-1 size:100% align:middle
Il faut faire attention quand même parce que lui il va se faire tuer en dedans.

00:00:12.720 --> 00:00:14.720 line:-1 size:100% align:middle
Chut! Pas un mot.

00:00:15.300 --> 00:00:15.690 line:-1 size:100% align:middle
Allô!

00:00:15.840 --> 00:00:16.900 line:-1 size:100% align:middle
Jean! Stéphane Pouliot.

00:00:17.150 --> 00:00:19.900 line:-1 size:100% align:middle
Ah ben la vedette! Tout le monde me parle de toi. Ça va bien la santé?

00:00:17.880 --> 00:00:18.670 line:0 size:50% align:middle
[sirène de police]

00:00:19.900 --> 00:00:21.900 line:-1 size:100% align:middle
Bien! Écoute là, tu peux pas faire ça.

00:00:22.220 --> 00:00:22.650 line:-1 size:100% align:middle
Faire quoi?

00:00:22.900 --> 00:00:26.200 line:-1 size:100% align:middle
Ce que tu as dit à TV là. Il est en prison, là où c'est dangereux pour lui.

00:00:26.360 --> 00:00:28.200 line:-1 size:100% align:middle
C'est pas si dangereux que ça. J'en ai fait de la prison!

00:00:28.200 --> 00:00:30.340 line:-1 size:100% align:middle
À cause de lui d'ailleurs. Et puis j'm'en suis remis.

00:00:30.340 --> 00:00:31.880 line:-1 size:100% align:middle
Non c'est pas même affaire.

00:00:32.010 --> 00:00:34.810 line:-1 size:100% align:middle
Hé! Ça fait des lunes que je suis assis sur cette histoire là. Ok!

00:00:35.240 --> 00:00:38.810 line:-1 size:100% align:middle
Now, j'ai pas parlé là, pour pas nuire aux enquêtes. Mais là j'me gênerai plus.

00:00:38.810 --> 00:00:40.950 line:-1 size:100% align:middle
Là, là il faut que tu fasses attention à c'que tu dis.

00:00:40.950 --> 00:00:43.830 line:-1 size:100% align:middle
Laurent, c'est une ancienne police puis ils s'gêneront pas pour se venger sur lui.

00:00:44.600 --> 00:00:46.940 line:-1 size:100% align:middle
J'suis sûr que chez vous il y en une couple qui doivent être ben contents.

00:00:46.940 --> 00:00:48.940 line:-1 size:100% align:middle
Plutôt euh contente.

00:00:49.390 --> 00:00:51.920 line:-1 size:100% align:middle
T'es prudent, c'est tout ce que je te demande. Alright?

00:00:51.920 --> 00:00:52.700 line:0 size:50% align:middle
[un agent ouvre la porte du char]

00:00:52.090 --> 00:00:53.900 line:-1 size:100% align:middle
Uh uh. [coupe l'appel]

00:00:54.800 --> 00:00:56.150 line:-1 size:100% align:middle
[laisse tomber le cellulaire sur la table]

00:00:56.750 --> 00:00:58.570 line:-1 size:100% align:middle
Daniel euh téléphone pour toi, c'est Laurent Cloutier.

00:00:58.570 --> 00:01:00.950 line:-1 size:100% align:middle
Ouais j'vais l'prendre dans mon bureau. Nadine!