Accessibility is very important. Player controls in video players are normally buttons. They are not seen by screen readers which makes the player not accessible for blind and vision impaired people.
This tutorial will guide you how to add extra text controls that can be read by screen readers. The text controls include play video, pause video, fast forward, rewind, mute/unmute and go fullscreen.
The tutorial will also show you how to add accesskey attribute to the text controls so the command can be activated with shortcut keys.
There are 3 steps in this tutorial:
- Step 1 - Install Wonder Video Embed
- Step 2 - Create an HTML5 video player
- Step 3 - Add extra text controls
We will also discuss the situation when there are multiple video players on the same webpage:
- Additional - Multiple video players on the same webpage
Step 1 - Install Wonder Video Embed
First please install the plugin Wonder Video Embed. It's a free plugin. To install the plugin, in your WordPress backend, goto left menu Plugins -> Add Plugins, search "Wonder Video Embed", install and activate it.
Step 2 - Create an HTML5 video player
You can view the following quick start YouTube video for how to create an HTML5 video player with the plugin: How to add video into a WordPress post or page.
For help document of the plugin, please view Wonder Video Embed Help Document.
For how to add a video player into Gutenberg editor, please view the tutorial: How to add video player to Gutenberg editor
Please note, the video player will only be accessible when you add an mp4 video file and create an HTML5 video player. If you use the plugin to play YouTube or Vimeo videos, the player will not be accessible.
Step 3 - Add extra text controls
You can add the following HTML code to the WordPress page or post to create extra text controls for the player:
<a href="#" accesskey="p" onclick="jQuery('.wonderplugin-video').eq(0).find('.wpembed-inline-video').get(0).play();return false;">Play Video</a>
<a href="#" accesskey="a" onclick="jQuery('.wonderplugin-video').eq(0).find('.wpembed-inline-video').get(0).pause();return false;">Pause Video</a>
<a href="#" accesskey="f" onclick="jQuery('.wonderplugin-video').eq(0).find('.wpembed-inline-video').get(0).currentTime+=10;return false;">Forward 10 seconds</a>
<a href="#" accesskey="r" onclick="jQuery('.wonderplugin-video').eq(0).find('.wpembed-inline-video').get(0).currentTime-=10;return false;">Rewind 10 seconds</a>
<a href="#" accesskey="m" onclick="jQuery('.wonderplugin-video').eq(0).find('.html5boxVolumeButton').click();return false;">Toggle Mute</a>
<a href="#" accesskey="s" onclick="jQuery('.wonderplugin-video').eq(0).find('.html5boxFullscreen').click();return false;">Go Fullscreen</a>
The above code adds 6 text controls: play video, pause video, forward 10 seconds, rewind 10 seconds, toggle mute and go fullscreen. To exit the full screen, please press the ESC key on the keyboard.
In the HTML code, the accesskey attribute defines the keyboard shortcut for the commands. Different computer systems (Windows or Mac) and different web browsers have different ways to access the keyboard shortcut, please view the tutorial: HTML accesskey Attribute.
A demo created with this tutorial is as follows:
Additional - Multiple video players on the same webpage
When there are multiple videos players created with Wonder Video Embed on the same webpage, the text controls created in step 3 will only work for the first video player.
In the text control HTML code, there is a code snippet jQuery('.wonderplugin-video').eq(0). For the second video player, please change the code to jQuery('.wonderplugin-video').eq(1). For the third video player, please change the code to jQuery('.wonderplugin-video').eq(2).
That's, you need to change the parameter in the eq() function call to the order of the video player. The order starts from 0.
Please note, the order is the player among all video players created with the plugin, including YouTube, Vimeo and HTML5 videos, though YouTube and Vimeo videos can not be controlled by the text controls.
For example, if the first player is a YouTube player, the second player is an HTML5 video player. To add text controls to the HTML video player, you need to use jQuery('.wonderplugin-video').eq(1).
