Skip to content

Add support to AD functionality in the player - #916

Merged
Dananji merged 4 commits into
mainfrom
videojs-ad
Mar 26, 2026
Merged

Add support to AD functionality in the player#916
Dananji merged 4 commits into
mainfrom
videojs-ad

Conversation

@Dananji

@Dananji Dananji commented Mar 13, 2026

Copy link
Copy Markdown
Collaborator

Related issue: #839
Related issue: #850

Changes in this PR:

  • extract audio description text-tracks from parsed supplementing annotations by detecting the /descriptions text in the annotation id
  • build the parsed audio description text-tracks into the <tracks> in the player element
  • create a custom button for AD and enable it in the player's control-bar when there are audio description text-tracks
  • use cuechange event handler of the active descriptions text-track to read the cues using WebAPI speechSynthesis

Implementation notes for the AD button:

  • VideoJS' native AD button: this renders in the player's control-bar and is only enabled when captions are turned OFF. This takes away the user control for the button, and limits captions and AD tracks operations. I was not able to enable it programmatically in the Ramp code once the player finished loading.
  • A fully custom AD button: build a fully custom AD button without feeding the audio description text-tracks to VideoJS. This work seamlessly with what Ramp needs, i.e. a toggle button with speech synthesis. However,
    this needs Ramp to parse and synchronize the cues with the player's timeupdate event. This makes the code more complex and could make the event synchronization for different browsers difficult (as we've seen in the past).
  • Implemented behavior: a hybrid solution between VideoJS' native behavior and a custom component implmentation. This feeds audio description text-tracks to VideoJS and build a custom VideoJS component as a toggle button. This way Ramp doesn't need to parse and synchronize the cues in the AD text-tracks, but can tag onto the cuechange event emitted by the active text-track marked by VideoJS to enable speech synthesis. This doesn't make the AD functionality dependent on the captions like the native AD functionality.

Notes:

  • AD button is only added to a Video player's control-bar when there is an audio description text-track given as a supplementing Annotation.
  • AD button is a toggle button, and is turned OFF by default. i.e. turned OFF on page load and preserved across Canvas changes in the same Manifest.
Screenshot 2026-03-13 at 11 27 09 AM Screenshot 2026-03-13 at 11 26 43 AM

@Dananji
Dananji force-pushed the videojs-ad branch 4 times, most recently from 7a3b174 to 42a34c8 Compare March 13, 2026 21:47

@cjcolvar cjcolvar left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great as far as I can tell!

@Dananji
Dananji merged commit 2209c63 into main Mar 26, 2026
3 checks passed
@Dananji
Dananji deleted the videojs-ad branch March 26, 2026 21:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants