Use subtitles file and use in looping video #14624
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
domlander
force-pushed
the
doml/subtitles
branch
from
e4066a5 to
0366c04
Compare
…be removed before merge
… drawn by the browser. It instead draws another box around the cue box which is not desired.
…ubtitles are available to JS on all browsers.
…he cues by % off of that.
…ur cannot currently be modified whilst we only support the browser subtitle implementation.
abeddow91
force-pushed
the
doml/subtitles
branch
2 times, most recently
from
a4b507b to
d6e2c9a
Compare
abeddow91
force-pushed
the
doml/subtitles
branch
from
a54eea7 to
a94431e
Compare
abeddow91
reviewed
Oct 21, 2025
domlander
commented
Oct 22, 2025
abeddow91
force-pushed
the
doml/subtitles
branch
from
40929b6 to
3e64bc9
Compare
abeddow91
added
fronts + curation
feature
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this change?
This PR allows a subtitle (VTT) file to be passed into the looping video player.
Why?
For now, DCR will not implement a third-party library to support HLS on all browsers. Instead, DCR will leverage built in browser support.
This means that
Chrome and other browsers enforce stricter cross-origin rules for subtitle files. To ensure subtitles load correctly, the looping video player now uses an anonymous CORS policy for all video and subtitle requests. As a consequence, local development of loops must now be done on
r.thegulocal.com, as localhost requests will be blocked by CORS.With built in browser subtitles, we are limited to how much we can style the cue boxes. The client runs javascript to adjust the line of each cue box so that it sits 12px above the bottom of the video player. As cuebox lines are measured in %, this is achieved by measuring the height of the video before calculating the percentage from bottom. This could be enhanced further by using a resizer function to adjust the calculation when the window is resized but this has not been included in this PR as self styled subs will display most often.
Further styling enhancements will be introduced in a follow up PR. This is because each browser currently applies its own styling and so it subtitle appearance is not consistent across the board.
Screenshots