Ready solution of an accessible video player on HTML5
Video content has already firmly entered the world of the Internet, and without it, it is already difficult to imagine a global network. Nevertheless, the technology of embedding video into hypertext documents has undergone a definite evolution since the past: from RealPlayer to QuickTime and Flash, and now to native HTML5 video support. Nevertheless, all this time various implementations of video players suffered from both cross-platform and cross-browser problems, as well as from low or even zero accessibility. And if the ways to deal with the first group of problems are generally understandable and exist in the form of ready-made solutions, these are the accessibility problems for the vast majority of web developers, and, as a rule, they are difficult to understand, but with regard to video they remained a mystery. However, fortunately, a ready-made solution appeared and the second problem, so that everyone will be able to provide their users with a fully accessible video player and without deep competences in web accessibility.
PayPal experts, who have already noted a product like the Bootstrap Accessibility Plugin , decided this time to tackle the problem of video content availability and solve it exclusively within HTML5 without any additional dependencies or third-party plug-ins. The following objectives were set for the project:
')
Support for the video container is generally handled well by all modern browsers, unless it belongs to those of Internet Explorer 8. By and large, even the standard implementation of embedded video already has basic accessibility and even allows you to attach subtitles , but there is no limit to perfection, so there is something to improve .
At first, the usual container video is used, which allows you to save basic functionality in the situation of a mobile browser or disabled JavaScript, because then instead of the custom implementation you simply display the standard HTML5 player. If the user comes from a modern PC browser, where JavaScript is enabled, the player offers him a customized interface with modified controls, design and support for subtitles (if any), and most importantly, all this is characterized by maximum accessibility for users with various restrictions.
The restart, start / pause, and rewind controls are implemented via button controls, and the on / off sound and subtitles are checked through checkbox elements, since it requires the emphasis of two states, but the volume setting is implemented through input with a specified range.
You can see the player live here .
The developers point out some inconsistencies in the support of WebVTT on the latest versions of PC browsers. Chrome behaves more or less decently, but Internet Explorer 11, Safari 7 and Firefox 31 have problems with subtitles, although Safari 6 and Firefox 30 had no such problems. It’s not strange, but mobile browsers behave more adequately with respect to support for subtitles, and on Android and iOS this functionality works without problems.
Personally, I would note from weak points that the developers have not yet provided hotkeys or at least accesskey attributes for controls, which would significantly increase the accessibility of the player for users of non-visual screen access programs. Since their interaction in most cases is carried out through the audio channel, the sound of the video being played may prevent them from finding the desired control, while having hot keys would help control the player without first having to focus on the buttons and checkboxes, that is, virtually blind.
In addition, when using the player on non-English-language sites, we should not forget to localize the text labels of the controls.
The Accessible HTML5 Video Player license allows using it to the maximum extent possible, and you can get to know it closely on GitHub .
PayPal experts, who have already noted a product like the Bootstrap Accessibility Plugin , decided this time to tackle the problem of video content availability and solve it exclusively within HTML5 without any additional dependencies or third-party plug-ins. The following objectives were set for the project:
- Use the latest HTML5 technology in embedding videos, controls and subtitles;
- Minimize the weight of the code (5 kB CSS and 18 kB JS);
- Provide full keyboard control and accessibility for non-visual screen access programs;
- Provide subtitle support (used by WebVTT).
')
Support for the video container is generally handled well by all modern browsers, unless it belongs to those of Internet Explorer 8. By and large, even the standard implementation of embedded video already has basic accessibility and even allows you to attach subtitles , but there is no limit to perfection, so there is something to improve .
At first, the usual container video is used, which allows you to save basic functionality in the situation of a mobile browser or disabled JavaScript, because then instead of the custom implementation you simply display the standard HTML5 player. If the user comes from a modern PC browser, where JavaScript is enabled, the player offers him a customized interface with modified controls, design and support for subtitles (if any), and most importantly, all this is characterized by maximum accessibility for users with various restrictions.
The restart, start / pause, and rewind controls are implemented via button controls, and the on / off sound and subtitles are checked through checkbox elements, since it requires the emphasis of two states, but the volume setting is implemented through input with a specified range.
You can see the player live here .
The developers point out some inconsistencies in the support of WebVTT on the latest versions of PC browsers. Chrome behaves more or less decently, but Internet Explorer 11, Safari 7 and Firefox 31 have problems with subtitles, although Safari 6 and Firefox 30 had no such problems. It’s not strange, but mobile browsers behave more adequately with respect to support for subtitles, and on Android and iOS this functionality works without problems.
Personally, I would note from weak points that the developers have not yet provided hotkeys or at least accesskey attributes for controls, which would significantly increase the accessibility of the player for users of non-visual screen access programs. Since their interaction in most cases is carried out through the audio channel, the sound of the video being played may prevent them from finding the desired control, while having hot keys would help control the player without first having to focus on the buttons and checkboxes, that is, virtually blind.
In addition, when using the player on non-English-language sites, we should not forget to localize the text labels of the controls.
The Accessible HTML5 Video Player license allows using it to the maximum extent possible, and you can get to know it closely on GitHub .
Source: https://habr.com/ru/post/236641/
All Articles