**Description:** * Even though captions and subtitles are not the same, we use the term interchangeably for our purposes. User Stories 1. As a user with a hearing impairment, I want to be able to watch PiP videos with captions, as it’s my only way to follow along. 2. As a user, I want to be able to watch PiP videos with subtitles, so I can follow along with videos in unfamiliar languages or with poor sound quality. 3. As a user, I want to be able to watch PiP videos in situations when sound is distracting, so that I don’t have to interrupt my flow and return to the in-tab video playback with subtitles. Acceptance Criteria 1. Subtitles implementation can read WebVTT subtitles and supports subtitles display on all websites that are using [the WebVTT API](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API). 2. Websites that do not support WebVTT require site-specific adapters for subtitles to work in PiP. In this stage of the project, we will work on site-specific adapters for YouTube, Prime Video, and Netflix. 3. Subtitles in a user-chosen language are displayed in PiP if the user turned them on in the source tab. Users can turn subtitles on or off from the source tab, but not from the PiP window. 4. Subtitles in non-Latin scripts, if chosen by a user in a source tab, are successfully displayed in PiP. 5. The subtitles layer in PiP does not overlap with the existing playback or window controls. **How do we test this? If there is an implementation to test, please provide instructions for testing it; e.g. setting preferences, other preparation, how to trigger the UI, etc.** Support of the WebVTT captions and captions on websites requiring site-specific adapters is currently behind a `media.videocontrols.picture-in-picture.display-text-tracks.enabled` pref and defaults to off. In Nightly 99, if you flip the pref, you will be able to see captions on all websites that support WebVTT spec (e.g., coursera.org, CBC) and YouTube [due to this site-specific adapter patch](https://bugzilla.mozilla.org/show_bug.cgi?id=1753737). Please note: [the responsive styling patch is still in progress](https://bugzilla.mozilla.org/show_bug.cgi?id=1751231), but we hoped to review the existing behavior and design guidelines with the accessibility team. Please note: we have chosen to use our own [PiP Subtitles Styling](https://docs.google.com/document/d/1S7P9gsCwX1CB0C846Hm0k5X3IQDlSjzojeCSXCMndeU/edit#heading=h.mj8fiowo3unr) for a more consistent user experience and to limit initial investment into a risky bet. **When will this ship?** Firefox 100 - full support for WebVTT captions, captions support on YouTube, Prime Video, and Netflix via site-specific adapters. **Tracking bug/issue:** [Metabug for all captions support](https://bugzilla.mozilla.org/show_bug.cgi?id=1751505) [WebVTT captions support](https://bugzilla.mozilla.org/show_bug.cgi?id=1748884) **Design documents (e.g. Product Requirements Document, UI spec):** [Captions/Subtitles Support Story in the Picture-in-Picture Product Spec](https://docs.google.com/document/d/1--gQEq90_BQuVq7TLAThhUAXMB8LDNFdS_0ZyiUPu64/edit#heading=h.9oebx3wzstef) [PiP Subtitles Styling](https://docs.google.com/document/d/1S7P9gsCwX1CB0C846Hm0k5X3IQDlSjzojeCSXCMndeU/edit#heading=h.mj8fiowo3unr) [Figma captions behavior guidelines](https://www.figma.com/file/XfwsImmxmLvISYhMke6xSF/Picture-in-Picture?node-id=1023%3A2104) [Initial engineering scoping](https://docs.google.com/document/d/146WxHZ_b5M9Hg8QURd3dHoPdUoUYHuCoh1S9gyBH6vs/edit#) Engineering lead: mhowell@mozilla.com Product manager: amininkova@mozilla.com The accessibility team has developed the Mozilla Accessibility Release Guidelines which outline what is needed to make user interfaces accessible: https://wiki.mozilla.org/Accessibility/Guidelines Please describe the accessibility guidelines you considered and what steps you've taken to address them: **Describe any areas of concern to which you want the accessibility team to give special attention:** Minimum font size readability Font styling readability
Bug 1751505 Comment 2 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
**Description:** * Even though captions and subtitles are not the same, we use the term interchangeably for our purposes. User Stories 1. As a user with a hearing impairment, I want to be able to watch PiP videos with captions, as it’s my only way to follow along. 2. As a user, I want to be able to watch PiP videos with subtitles, so I can follow along with videos in unfamiliar languages or with poor sound quality. 3. As a user, I want to be able to watch PiP videos in situations when sound is distracting, so that I don’t have to interrupt my flow and return to the in-tab video playback with subtitles. Acceptance Criteria 1. Subtitles implementation can read WebVTT subtitles and supports subtitles display on all websites that are using [the WebVTT API](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API). 2. Websites that do not support WebVTT require site-specific adapters for subtitles to work in PiP. In this stage of the project, we will work on site-specific adapters for YouTube, Prime Video, and Netflix. 3. Subtitles in a user-chosen language are displayed in PiP if the user turned them on in the source tab. Users can turn subtitles on or off from the source tab, but not from the PiP window. 4. Subtitles in non-Latin scripts, if chosen by a user in a source tab, are successfully displayed in PiP. 5. The subtitles layer in PiP does not overlap with the existing playback or window controls. **How do we test this? If there is an implementation to test, please provide instructions for testing it; e.g. setting preferences, other preparation, how to trigger the UI, etc.** Support of the WebVTT captions and captions on websites requiring site-specific adapters is currently behind a `media.videocontrols.picture-in-picture.display-text-tracks.enabled` pref and defaults to off. In Nightly 99, if you flip the pref, you will be able to see captions on all websites that support WebVTT spec (e.g., coursera.org, CBC) and YouTube [due to this site-specific adapter patch](https://bugzilla.mozilla.org/show_bug.cgi?id=1753737). Please note: [the responsive styling patch is still in progress](https://bugzilla.mozilla.org/show_bug.cgi?id=1751231), but we hoped to review the existing behavior and design guidelines with the accessibility team. Please note: we have chosen to use our own [PiP Subtitles Styling](https://docs.google.com/document/d/1S7P9gsCwX1CB0C846Hm0k5X3IQDlSjzojeCSXCMndeU/edit#heading=h.mj8fiowo3unr) for a more consistent user experience and to limit initial investment into a risky bet. **When will this ship?** Firefox 100 - full support for WebVTT captions; captions support on YouTube, Prime Video, and Netflix via site-specific adapters. **Tracking bug/issue:** [Metabug for all captions support](https://bugzilla.mozilla.org/show_bug.cgi?id=1751505) [WebVTT captions support](https://bugzilla.mozilla.org/show_bug.cgi?id=1748884) **Design documents (e.g. Product Requirements Document, UI spec):** [Captions/Subtitles Support Story in the Picture-in-Picture Product Spec](https://docs.google.com/document/d/1--gQEq90_BQuVq7TLAThhUAXMB8LDNFdS_0ZyiUPu64/edit#heading=h.9oebx3wzstef) [PiP Subtitles Styling](https://docs.google.com/document/d/1S7P9gsCwX1CB0C846Hm0k5X3IQDlSjzojeCSXCMndeU/edit#heading=h.mj8fiowo3unr) [Figma captions behavior guidelines](https://www.figma.com/file/XfwsImmxmLvISYhMke6xSF/Picture-in-Picture?node-id=1023%3A2104) [Initial engineering scoping](https://docs.google.com/document/d/146WxHZ_b5M9Hg8QURd3dHoPdUoUYHuCoh1S9gyBH6vs/edit#) [Video demos of the in-progress responsive captions styling](https://drive.google.com/drive/u/0/folders/1FdwkOCu73kaixM9MOc2tHbPV-JY_Pce2) Engineering lead: mhowell@mozilla.com Product manager: amininkova@mozilla.com The accessibility team has developed the Mozilla Accessibility Release Guidelines which outline what is needed to make user interfaces accessible: https://wiki.mozilla.org/Accessibility/Guidelines Please describe the accessibility guidelines you considered and what steps you've taken to address them: **Describe any areas of concern to which you want the accessibility team to give special attention:** Minimum font size readability Font styling readability