Ready-made solution for an affordable HTML5 video player

    Video content has already firmly entered the world of the Internet and without it it is already difficult to imagine a global network. However, the technology for embedding video in hypertext documents has undergone a certain evolution over the past time: from RealPlayer to QuickTime and Flash, and at the moment to built-in video support in HTML5. Nevertheless, all this time, various implementations of video players have suffered both from cross-platform and cross-browser problems, and from low or even zero accessibility. And if the ways to deal with the first group of problems are generally clear and exist in the form of ready-made solutions, then the accessibility problems for the vast majority of web developers are already, as a rule, difficult to understand, but in relation to the video they remained a mystery. However, fortunately, a ready-made solution to the second problem appeared,

    PayPal specialists, who previously noted with such a product as 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 goals were set for the project:

    • Use the latest HTML5 technologies for embedding video, controls and subtitles;
    • Minimize code weight (5 kB CSS and 18 kB JS);
    • Provide full keyboard control and accessibility for non-visual screen access programs;
    • Provide subtitle support (using WebVTT).

    Screenshot Affordable HTML5 Video Player

    Support for the video container is generally handled well by all modern browsers, unless Internet Explorer 8 is one of them. 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 video container is used, which allows you to preserve the basic functionality in a situation of a mobile browser or JavaScript disabled, since then instead of the custom implementation, the standard HTML5 player is simply displayed. If the user logs in with a modern PC browser where JavaScript is enabled, the player offers him a customized interface with modified controls, design and subtitle support (if any), and most importantly all this is characterized by maximum accessibility for users with various restrictions.

    Restart, start / pause, and rewind control are implemented through button controls, and sound and subtitles are turned on / off through checkbox type controls, since two states need to be accented here, and volume control is implemented through input with a given range.

    You can watch the player live here .

    The developers note some inconsistency regarding WebVTT support 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 there were no such problems in Safari 6 and Firefox 30. It is not strange, but with respect to subtitle support, mobile browsers behave more adequately, and on Android and iOS this functionality works without problems.

    Personally, I would point out from the weak points that the developers have not yet provided for hot keys or at least accesskey attributes for controls, which would significantly increase the player's accessibility for users of non-visual screen access programs. Since their interaction in most cases is via the audio channel, the sound of the playing video may prevent them from finding the desired control out loud, while the presence of hot keys would help control the player without the need for preliminary focusing on the buttons and flags, that is, actually blind.

    In addition, when using the player on non-English-language sites, do not forget to localize the text labels of the controls.

    Accessible HTML5 Video Player license allows its maximum free use, and close to indecent you can get to know it on GitHub .

    Also popular now: