Missing CSS support for WebVTT subtitle styling (with ::cue pseudo-element)

Issue #12079271 • Assigned to Jerry S.

Details

Author
Greg E.
Created
May 19, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce

https://www.w3.org/TR/webvtt1/#the-cue-pseudo-element

When using WebVTT subtitles, developers must use the ::cue pseudo-element to style them, such as allowing vision-impaired users to choose a larger subtitle size in your web app.

Microsoft Edge is the last browser missing support for this. Safari and Chrome are shipping this, and Firefox has added support that will ship in Firefox 55 next month.

The alternative path for developers is to implement their own custom subtitle renderers. This is undesirable because:

  • Custom subtitle renderers have accessibility issues with screen readers
  • Custom subtitle renderers are tedious to implement
  • Custom subtitle renderers usually lack full support for WebVTT positioning and style features

For an example of a page with WebVTT subtitles, try this DASH video:
https://shaka-player-demo.appspot.com/demo/#asset=//storage.googleapis.com/shaka-demo-assets/sintel-mp4-only/dash.mpd;lang=en-US;play;audiolang=en-US;textlang=en-US;play

Seek to 2:00 to see some captions. Notice that styling *::cue has no effect in Edge.

Attachments

0 attachments

    Comments and activity

    • Changed Steps to Reproduce

      Changed Steps to Reproduce

      Changed Steps to Reproduce

      Changed Steps to Reproduce

      Changed Steps to Reproduce

    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

      Changed Assigned To to “Venkat K.”

      Changed Assigned To from “Venkat K.” to “Frank L.”

      Changed Assigned To from “Frank L.” to “Jerry S.”

    You need to sign in to your Microsoft account to add a comment.

    Sign in