Accessiblity - Video player - Enables keyboard navigation and aria labels for the video player #2
Open
scireum-mbo wants to merge 219 commits intosabieber:masterfrom
Open
Accessiblity - Video player - Enables keyboard navigation and aria labels for the video player #2scireum-mbo wants to merge 219 commits intosabieber:masterfrom
scireum-mbo wants to merge 219 commits intosabieber:masterfrom
Conversation
When pressed this button copies the provided deeplink into the clipboard and shows a little tooltip. Fixes: OX-6944
Spacebar: Plays/Pauses the video playback Left/Right Arrow: Skips 10 seconds back/forward Up/Down Arrow: Increases/decreases the volume by 5% Fixes: OX-6946
Fixes: OX-6945
Fixes: OX-6945
This should improve playouting on small screens imensely as the progress bar has a lot more room now. Fixes: OX-6945
Fixes: OX-6945
Fixes: OX-6945
Adds translatable button tooltips and optional deeplink button
Adds basic keyboard shortcuts for play/pause, time and volume
Adds close button and optimizes layout
This improves the scaling on mobile devices and other small screens.
This should make it more robust when changing the volume/mute via different ways, ie slider, keyboard, storage. Fixes: OX-6948
This feels a lot more intuitive than putting it back at 0. Fixes: OX-6948
Stores Video Volume and Mute State in the Local Storage
Fixes: OX-6943
Fixes: OX-6943
Small Fixes
Fixes: OX-8869
Fixes broken safari option menu layout
Apple seemingly changed the conditions of the `webkitSupportsFullscreen` flag on iOS 16 to only be set to `true` for video elements after the metadata of the video file is loaded. Because of this we have to delay the check whether to show the button to the `loadedmetadata` event. Fixes: OX-9184
Apple iOS 16: Shows the fullscreen button when available
This is most likely the expected behaviour as otherwise the user is stuck in fullscreen mode without a video. This way users of this library don't have to include this check in their closeCallbacks. Fixes: OX-9290
Ends the fullscreen mode of the video when user presses the close button
Fixes: SIRI-676
Adds css to make select in controls more robust
When instantiating the player one can pass one or multiple videos with one or multiple quality levels. For each quality level one or multiple different codecs can be provided. Previously the player did not check whether those codecs can actually be played by the browser, which resulted in quality levels that were selectable but did not result in a playable video. Fixes: OX-10520
Filters out quality levels without playable codec
This is done to support use cases where different codecs are present for different quality levels, like when some of them are only processed in the background after the video is made public. The new logic does not just update the urls of already present source tracks but: - Creates ones for codecs that where not present on the previous quality level - Removes ones for codecs that are no longer present on the new quality level Fixes: OX-10576
Dynamically creates/removes video sources according to quality
The given sources list may already have an optimized order of codecs to play. Previously we always appended at the end of the video element, which broke that order. Fixes: OX-10576
Fixes: OX-10576
Inserts dynamically added sources in the correct order
The video player loads an SVG icon sheet and adds it to the bottom of the page. This container was previously not hidden and some browsers rendered it with a height higher than 0. We now hide it to ensure its invisible and does not mess with the height of the page.
Hide included icon sheet container properly
Restricts video title to two lines. Ellipsis on a single line is a little restrictive on mobile devices, so we utilize webkit box with line clamping. Seems to be supported by all modern browsers. Fixes: SIRI-1091
Prevent extremely long title from breaking the layout
Added ARIA attributes for better screen reader support, refactored button event handlers for keyboard accessibility, and optimized code for clarity and performance. Fixes: OX-12099
Updated styles for better focus visibility and accessibility. Added ARIA attributes to buttons and improved gradient backgrounds for better contrast. Fixes: OX-12099
Refine focus styles for buttons and dropdowns, ensuring better keyboard navigation and accessibility. Added support for closing dropdowns with the Escape key and improved focus management during quality and speed changes. Fixes: OX-12099
Refactor ARIA attributes to use property accessors for improved accessibility in the video player controls. Fixes: OX-12099
Refactor button event handlers to improve keyboard accessibility and maintainability. Fixes: OX-12099
Fixes: OX-12099
Improved focus handling for keyboard users by ensuring the correct elements are focused based on visibility and interaction context. Fixes: OX-12099
Changed the ARIA label of the Chromecast button to improve clarity and accessibility. Fixes: OX-12099
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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.
Description
After:
After.mov
Additional Notes
Checklist