Story: Create Video Player Container Component

[andyvanavery]

As a site visitor with full or limited audio or visual capabilities, I want to be able to access the content of any videos displayed on the site, so that I can fully experience the available content.

Tasks

• [x] Brainstorm possible solutions
  • [x] Follow up with Bryan for feedback on proposed solutions
• [ ] Ask Joe if there are analytics on the number of users who went to a video page in english and then translated the page in Spanish. Depending on the outcome, investigate ways to indicate that embedded videos have access to the Spanish version of the video (options: link to YouTube)
• [ ] Product, Designers, and IA develop visual solution options
• [ ] Confirm feasibility of solutions with Developers
• [ ] Demo solutions to client and get agreement on which solution to follow
• [ ] Draft and finalize AC's for selected solution
• [ ] Develop pattern/container in the Digital Platform
• [ ] Demo accepted solution to client and receive confirmation
• [ ] Add solution to Home Page video

Needs & Requirements

• The user shall be able to access transcript
• The videos shall either be created with audio descriptions or the user shall be able to access to the audio description file
• The video player container/pattern shall be able to contain the YouTube player
• The video player shall maintain the functionality of the current youtube player
  • Play/Pause button
  • Audio button - mute/unmute on click, volume slider on hover
  • Closed Caption button
  • Settings button
  • YouTube button (link to the YouTube page)
  • Full screen button
• The creation of captions, transcripts, and audio descriptions shall not be a manual process
• Audio description files shall not be embedded onto a page
• A link will be made for the audio-description file, either to YouTube or wherever else it lives
• If a user embeds an audio-description video to the page, it shall behave like a standard video
• The link to the audio-described file shall be translatable
• The link to the audio-described file shall change to the audio-described Spanish file when the page is translated
• Need guidance to create the translation within the single video content and not to create a whole new video
• Client likes the idea of linking to the video on YouTube/CaptionSync
• Transcriptions will be put into the backlog since it is level 3 of 508 compliance. The closed captions on YouTube meet level 1, Audio-Described meets level 2

Scenarios to give to the Designer (can add them all to a page so they can see all the things to design around):

• Video on H&L
• Embedded:
  • Large, Medium, Small
  • With/without title

Notes

• CaptionSync is currently used for for creating transcripts and captions
• Video players can be different, but the pattern of accessing the transcript/audio description must be the same. Ensure consistency in user experience.
• Transcripts and audio described versions of videos to be created by a software solution. Client would prefer not to use CaptionSync, but due to funding restrictions, its use may be need to be maintained.
• Investigate vbrick to determine if it will only be used for livestreams, cannot be embedded on page

Solution Selection Notes

• Create a container/pattern to hold YouTube and vBrick video players that gives a consisted UX to the user

Acceptance Criteria

How site visitor interacts with solution

Scenario: 
Given
Then

How content editor adds solution to site

Scenario: 
Given
Then

Additional details / screenshot

Related Tickets

• Accessibility - #3819

Out of Date ideas, may be useful in future change of video player ~~Changes to Current Video Player

• Allow captions to be able to include links within its text
• Button that allows opens the transcript below the audio/video player (see the current audio player solution on https://www.cancer.gov/news-events/press-releases/2023/nci-launches-persistent-poverty-initiative). Would require code to be built out every time. Increased complexity and work required to meet a11y requirement.
• Add feature that allows for linking to audio-description file
• Only make videos with audio description

Using a Better, More Accessible Video Player

• AblePlayer. Open source, used on other projects before. Has blessing from Alison Walden's team. Handles YouTube videos. Experience not much different. Supports Transcripts, autoscrolling, highlighting current speech, side-by-side with video. There is a switch to change to the audio-described version of the video. No large change needed due to links being passed from YouTube to AblePlayer. Would need links to the transcript and audio-description. Also handles Vimeo videos, mp4's, and can replace the audio player (would include transcripts of audio content). Need to investigate the fit of the new video and audio player on the pages from a content perspective. Uses jquery (something that is trying to be removed from the site) it is old and adds file size to the website. Impact isolated to pages that have video.
• Other Federally Recommended Players: - MediaFront Module, OSM Player (both work with Drupal)
• Other option: Plyr (no dependencies on jquery, will need further investigation)~~

[santwuma]

Decided on 8/23 Prioritization call to add this to redesign backlog to be picked up later. Pausing next steps with solutioning.

cc: @bennettcc @andyvanavery

[bennettcc]

Adding to current Redesign project - will eventually need to be added to a release 3 project (for work in 2024)

[santwuma]

@bennettcc during the O&M backlog prioritization meeting on 2/14, OCPL leads asked to prioritize this video accessibility effort as part of O&M and not Redesign. We will be following up with refining requirements and solutioning for dev work. So this can come off Redesign Roadmap unless there are other dependent tickets/risks that we may need to consider.

[andyvanavery31]

@andyvanavery31 @sarinapadilla to update this ticket to condense the requirements to meet our current needs, then give to the designers.