mediaplayer keyboard support?

[david]

WCAG Accessibility requires keyboard support, but the documentation doesn't show any support?

https://www.telerik.com/products/aspnet-ajax/documentation/controls/mediaplayer/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance

 

[Rumen]

Hi David,

Thank you for reaching out. RadMediaPlayer for ASP.NET AJAX currently offers only limited built-in keyboard support, which may not fully meet accessibility requirements out of the box.

At present, the control provides:

• Basic navigation using the Tab key to focus on the control, though consistent behavior across all scenarios is not guaranteed
• AccessKey and TabIndex properties for initial focus management
• Limited native keyboard shortcuts (common accessibility features like Space for play/pause or Arrow keys for seeking are not implemented)

 

Workaround: Custom Keyboard Support via JavaScript

To achieve more comprehensive keyboard support, you can implement custom JavaScript to handle keyboard events. Here's an example that adds keyboard functionality for play/pause and other common media controls:

<style>
    .RadMediaPlayer :focus {
        outline: 5px dashed red;
    }
</style>
<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
    <script>
        function OnClientReady(sender, args) {
            var player = $find("<%= RadMediaPlayer1.ClientID %>");
            var playerElement = player.get_element();

            // Make the player focusable
            playerElement.setAttribute('tabindex', '0');

            playerElement.addEventListener('keydown', function (e) {
                switch (e.code) {
                    case 'Enter':
                    case 'Space':
                        // Toggle play/pause
                        player.isPlaying() ? player.pause() : player.play();
                        e.preventDefault();
                        break;
                    case 'ArrowRight':
                        // Skip forward 5 seconds
                        player.set_currentTime(player.get_currentTime() + 5);
                        e.preventDefault();
                        break;
                    case 'ArrowLeft':
                        // Skip backward 5 seconds
                        player.set_currentTime(player.get_currentTime() - 5);
                        e.preventDefault();
                        break;
                }
            });
        }
    </script>
</telerik:RadScriptBlock>
<telerik:RadMediaPlayer OnClientReady="OnClientReady" AccessKey="T" TabIndex="1" RenderMode="Lightweight" ID="RadMediaPlayer1" Skin="Glow" runat="server" Width="700px" BackColor="Black"
    StartVolume="80" Height="394px">
</telerik:RadMediaPlayer>

This workaround provides:

• Enter/Space: Play/Pause toggle
• Arrow Right/Left: Seek forward/backward
• Access key: to focus the control

You can customize these shortcuts based on your specific requirements and accessibility needs.

Feature Request

There is an active feature request for enhanced keyboard support and accessibility in RadMediaPlayer:

RadMediaPlayer - Keyboard Support

I encourage you to vote for this feature and add your specific use case in the comments. This helps our product team prioritize development based on customer needs.

If you have specific keyboard navigation or accessibility requirements (such as WCAG 2.1 compliance, screen reader support, or custom shortcuts), please share more details about your use case in the feedback portal item. Thank you!

 

Regards,
Rumen
Progress Telerik