Handle tricky problems to get subtitles working on intro video

First and foremost, the mime type has to be supported by the web
server.  Either you have to add a `.vtt` mimetype, *or* just put it
as a `.txt` file.  I chose the latter since it doesn't require a
custom Apache configuration.

Second, even if you make it a `.txt` file, using a CDN does not seem
to work.  I suspect that maybe CDNs do really weird things with
mimetypes when they server them, or maybe the <track> element just
really doesn't like it when the URL is 301'd. 🤷

Anyway, with these two changes: using a `.txt` file, and hosting the
file locally, the subtitles now work properly!

Note, if you use the `default` attribute in the <track> tag, it'll
turn them on by default.  Leaving it off does allow the user to turn
them on in my tests in both Chromium and Firefox.
This commit is contained in:
Bradley M. Kuhn 2022-05-12 17:15:30 -07:00
parent f0a78d5f9f
commit 2565767830
3 changed files with 163 additions and 2 deletions

View file

@ -0,0 +1,161 @@
WEBVTT
1
0:00:10.880 --> 0:00:15.920
<v Karen Sandler>Software Freedom Conservancy is a non-profit 
organization centered around ethical technology
2
0:00:16.800 --> 0:00:22.560
<v Karen Sandler>our mission is to ensure the right to repair 
improve and reinstall software we promote and
3
0:00:22.560 --> 0:00:26.560
<v Karen Sandler>defend these rights through fostering 
free and open source software projects
4
0:00:26.560 --> 0:00:31.600
<v Karen Sandler>driving initiatives that actively make technology 
more inclusive and advancing policy strategies
5
0:00:31.600 --> 0:00:36.720
<v Karen Sandler>that defend software freedom to forward these 
goals Software Freedom Conservancy takes a three
6
0:00:36.720 --> 0:00:42.000
<v Karen Sandler>branched approach copyleft advocacy diversity 
and inclusion and supporting alternatives
7
0:00:42.640 --> 0:00:47.840
<v Karen Sandler>free and open source software or FOSS for short 
is software that protects your rights and freedoms
8
0:00:47.840 --> 0:00:51.360
<v Karen Sandler>developers work hard to write FOSS and 
Software Freedom Conservancy is here
9
0:00:51.360 --> 0:00:56.400
<v Karen Sandler>to protect and preserve your freedoms 
ensuring the right to view modify share
10
0:00:56.400 --> 0:01:02.080
<v Karen Sandler>and use the software for any purpose free 
software like copylefted software ensures
11
0:01:02.080 --> 0:01:05.600
<v Karen Sandler>that software stays free in the future 
as more and more people contribute to it
12
0:01:06.720 --> 0:01:10.960
<v Karen Sandler>copyleft is a kind of software licensing 
that leverages the restrictions of copyright
13
0:01:10.960 --> 0:01:16.400
<v Karen Sandler>but with the intent to promote sharing this helps 
consumers make sure their devices can be updated
14
0:01:16.400 --> 0:01:22.720
<v Karen Sandler>and last longer avoiding premature obsolescence 
Software Freedom Conservancy defends your rights
15
0:01:22.720 --> 0:01:27.200
<v Karen Sandler>as a consumer from companies who seek to deny 
these rights despite their responsibilities
16
0:01:28.400 --> 0:01:32.400
<v Karen Sandler>Software Freedom Conservancy helps hold 
companies accountable for the software that
17
0:01:32.400 --> 0:01:39.840
<v Karen Sandler>is included in millions of devices worldwide 
and upon which millions of consumers rely
18
0:01:40.480 --> 0:01:44.960
<v Karen Sandler>free software is truly borderless and at 
Software Freedom Conservancy we strongly
19
0:01:44.960 --> 0:01:49.440
<v Karen Sandler>believe that no one should be denied access to 
valuable information creating a level playing
20
0:01:49.440 --> 0:01:53.680
<v Karen Sandler>field for everyone in our free software 
community conservancy helps by bringing to
21
0:01:53.680 --> 0:01:57.920
<v Karen Sandler>light and providing support for historically 
excluded communities and technology spaces
22
0:01:58.480 --> 0:02:03.200
<v Karen Sandler>in particular those subject to systemic bias 
and who are impacted by underrepresentation
23
0:02:06.960 --> 0:02:11.760
<v Karen Sandler>in today's high-tech world reliable software is of 
the utmost importance for our daily work and play
24
0:02:13.120 --> 0:02:17.840
<v Karen Sandler>this is why Software Freedom Conservancy is proud 
to support industry-grade software applications
25
0:02:17.840 --> 0:02:22.640
<v Karen Sandler>that help everyone all over the world work 
and play better faster and with more freedom
26
0:02:23.200 --> 0:02:27.200
<v Karen Sandler>FOSS applications allow you to retain 
complete control over everything you make
27
0:02:27.200 --> 0:02:32.320
<v Karen Sandler>and they work cross-platform this not only 
makes for more cooperative working environments
28
0:02:32.320 --> 0:02:36.320
<v Karen Sandler>but breaks down barriers imposed 
by proprietary software vendors
29
0:02:36.320 --> 0:02:42.400
<v Karen Sandler>ensuring everyone can work freely without giving 
away their privacy autonomy or user rights
30
0:02:43.840 --> 0:02:49.920
<v Karen Sandler>free software is your software here at software 
freedom conservancy we work towards a future where
31
0:02:49.920 --> 0:02:56.880
<v Karen Sandler>user freedoms are the highest priority come join 
our pursuit for a better digital world this cannot
32
0:02:56.880 --> 0:03:03.840
<v Karen Sandler>happen without you please take a moment and become 
a Software Freedom Conservancy sustainer now

View file

@ -48,7 +48,7 @@ strategies that defend FOSS (such as copyleft). <a href="/about" class="orange">
<section class="mh0 pa3 bg-light-blue ba b--gray"> <section class="mh0 pa3 bg-light-blue ba b--gray">
<p><video style="width: 95%; height: auto;" controls="" poster="/videos/sfc-introduction-video_poster.jpg"> <p><video style="width: 95%; height: auto;" controls="" poster="/videos/sfc-introduction-video_poster.jpg">
<source src="/videos/sfc-introduction_1080p.mp4" /> <source src="/videos/sfc-introduction_1080p.mp4" />
<track src="/videos/sfc-introduction.vtt" kind="subtitles" srclang="en" label="English" /> <track src="/docs/sfc-introduction-vtt-captions.txt" kind="subtitles" srclang="en" label="English" />
<a href="/videos/sfc-introduction_1080p.mp4"><img src="/videos/sfc-introduction-video_poster.jpg" alt="Software Freedom Conservancy introduction video"></a><br/> <a href="/videos/sfc-introduction_1080p.mp4"><img src="/videos/sfc-introduction-video_poster.jpg" alt="Software Freedom Conservancy introduction video"></a><br/>
<a href="https://youtu.be/yCCxMfW0LTM">(watch on Youtube)</a> <a href="https://youtu.be/yCCxMfW0LTM">(watch on Youtube)</a>
</video></p> </video></p>

View file

@ -54,7 +54,7 @@
<p style="text-align:center;"> <p style="text-align:center;">
<video style="width: 50%; height: auto;" controls="" poster="/videos/sfc-introduction-video_poster.jpg"> <video style="width: 50%; height: auto;" controls="" poster="/videos/sfc-introduction-video_poster.jpg">
<source src="/videos/sfc-introduction_1080p.mp4" /> <source src="/videos/sfc-introduction_1080p.mp4" />
<track src="/videos/sfc-introduction.vtt" kind="subtitles" srclang="en" label="English" /> <track src="/docs/sfc-introduction-vtt-captions.txt" kind="subtitles" srclang="en" label="English" />
<a href="/videos/sfc-introduction_1080p.mp4"><img src="/videos/sfc-introduction-video_poster.jpg" <a href="/videos/sfc-introduction_1080p.mp4"><img src="/videos/sfc-introduction-video_poster.jpg"
alt="Software Freedom Conservancy introduction video"></a><br/> alt="Software Freedom Conservancy introduction video"></a><br/>
<a href="https://youtu.be/yCCxMfW0LTM">(watch on Youtube)</a> <a href="https://youtu.be/yCCxMfW0LTM">(watch on Youtube)</a>