New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Keyboard Navigation

0:00 / 0:00

Keyboard navigation provides all web and app users with a fast keyboard-only navigation capability and is also part of the web accessibility features–it enables users with disabilities to fully control their website or app access through the keyboard.

By default, users can only navigate to links, buttons, and form controls with a keyboard. The navigation order in which interactive items receive keyboard focus has to be logical and intuitive. Generally, keyboard navigation logic needs to follow the visual horizontal and vertical flow of the page, for example, left to right and top to bottom, header first followed by the main and then the page navigation.

The MediaPlayer keyboard navigation is enabled by default, as demonstrated in this demo.

Users can utilize Alt + AccessKey combination ("A" in the Demo's case) to focus the RadMediaPlayer component.

The MediaPlayer supports the following keyboard shortcuts:

  • Space Toggles Play and Pause.
  • Esc Exits the FullScreen mode.
  • F Opens the video in the FullScreen mode.
  • M Toggles Mute and Unmute.
  • C Toggles Subtitles.
  • H Toggles HD Video Quality.
  • Right Arrow Seeks forward.
  • Left Arrow Seeks backward.
  • Up Arrow Increases the volume.
  • Down Arrow Decreases the volume.
  • 1-9 Seeks to a percentage of the video duration.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"  Inherits="Media_Player_Examples_Accessibility_and_Internationalization_KeyboardSupport_DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <style type="text/css">
        .size-custom {
            width: 640px;
        }
    </style>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-custom">
        <telerik:RadMediaPlayer RenderMode="Lightweight" ID="RadMediaPlayer1" runat="server" Height="360px" Width="640px" Source="https://www.youtube.com/watch?v=6qvHlqdgEg0" AccessKey="A" />
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance