Web Video Keyboard Nav por Fabian Köster

Navigate Netflix, the ZDF Mediathek, the ARD Mediathek, PeerTube and Nebula entirely with the keyboard arrow keys, without reaching for the mouse — built for couch/remote-style control where a mouse is awkward.

On www.netflix.com the extension adds:

• Profile selection — ← and → move between profiles; the first profile is focused automatically on load.
• Top nav bar — ↑ from the first content row jumps to the nav bar (Home, Shows, Movies, Games, …); ← and → move across it, Enter opens a section, the search field or the profile switcher, and ↓ returns to the content.
• Home and browse grids — ↑ and ↓ move between rows (keeping your column where possible), ← and → move between titles within a row, wrapping at the edges. Works on the Shows and Movies pages too.
• Search — type in the search box, then press ↓ to drop into the results; the arrow keys follow the on-screen grid layout. ↑ from the top row returns to the search box, and Esc collapses the search box back to its magnifier icon.
• Title details — the action buttons, season picker, episode list and the “More Like This” grid are all reachable with the arrow keys.
• Dropdowns — the profile switcher, genre picker, rating flyout and season picker are arrow-navigable, with Enter to choose.

On www.zdf.de the extension adds:

• Header — ↑ from the content jumps to the header (Startseite, Kategorien, Kinder, Live & TV, Suche, Mein ZDF); ← and → move across it, Enter opens a section and keeps the focus in the header, and ↓ returns to the content.
• Hero — the “Abspielen” button is focused on load; ← and → reach the buttons beside it (“Mehr Informationen”, bookmark, rate, share).
• Content — ← and → move through a row, wrapping at its ends and scrolling side-scrolling lanes along with you; ↑ and ↓ follow the on-screen layout — down the rows of a grid, from lane to lane, and through an episode list.
• Tabs — “Folgen”, “Empfehlungen”, “Extras” and “Details” sit between the hero and the content and are reachable with ← and →.
• Search — type straight away on /suche, then press ↓ to drop into the results; ↑ from the top row returns to the search field, and Esc clears the query.
• Menus — context menus and dialogs (the cookie banner included) are arrow-navigable, with Enter to choose.

On www.ardmediathek.de the extension adds:

• Top bar — ↑ from the content jumps to the bar (Start, Live, Meine ARD, Suche, the slide-out menu); ← and → move across it, Enter opens a section and keeps the focus in the bar, and ↓ returns to the content.
• Hero — on a title page “Abspielen” is focused on load, with “Trailer” and “Merken” beside it. On the start page the hero is a slideshow: ← and → move along the current slide's buttons and, at their ends, turn to the next featured title. Its seven-second autoplay is stopped, so the selection cannot slide out from under you.
• Content — ← and → move through a row, wrapping at its ends and turning the row's own pages along with you; ↑ and ↓ follow the on-screen layout — down the rows of a grid, from row to row, and through the chip bars in between (Rubriken, the season picker, the search filters, the Live channels, the A-Z letters). Rows that have not rendered yet are reached by scrolling on until they appear.
• Search — type straight away on /suche. While ARD offers completions under the field, ↑/↓ move through them and Enter searches for one; Esc puts them away and hands focus to the bar, keeping the query, so ↓ from there reaches the results. With nothing to complete, ↓ drops into the results directly, ↑ from the top row returns to the field, and Esc clears the query.
• Slide-out menu — the menu behind the hamburger is arrow-navigable, with Enter to choose and Esc to close.
• Player — a video page does not start playing by itself (a livestream does — it is already running). It opens with the player selected, framed in white like anything else, and ↓ walks on into the rest of the page. Enter plays it fullscreen; Esc leaves fullscreen, pauses, and puts the selection back on the player. While it is playing the keys are ARD's own player's, which brings its own controls.

On PeerTube — any instance — the extension adds:

• Where it runs — PeerTube is federated: the same application under thousands of domains. Three instances are enabled out of the box (tube.funfacts.de, tube.tchncs.de, peertube.heise.de); add the ones you watch in the add-on's settings and Firefox will ask you to allow that one site.
• Header — ↑ from the top of the content jumps to the bar (the instance's home link, the search field, settings, Login); ← and → move across it, and ↓ returns to the content.
• Lateral menu — ← at the left edge of the content steps into the menu down the side (Home, Discover, your library, About); ↑ and ↓ move through it, → comes back, and opening a section keeps the selection on the menu. The section tabs under the header behave the same way.
• Content — everything else follows the on-screen layout in both directions: ← and → along a row of cards or buttons, ↑ and ↓ down the rows of a grid, into the video's action row, and on into the recommendations beside the player. A listing that loads its next page as you scroll is waited for rather than treated as the end.
• Search — the search in the header is a stop like any other button, so ← and → carry on past it. Enter hands the keys to the field and they are then yours to type with, PeerTube's own suggestions included; Enter searches and selects the first result, and Esc leaves the field for the bar, keeping the query.
• Player — a video page does not start playing by itself. It opens with the player selected, framed like anything else, and ↓ walks on into the page below it. Enter plays it fullscreen; Esc leaves fullscreen, pauses, and puts the selection back on the player. While it is playing the keys are PeerTube's own player's.
• Menus and modals — the share, download and sort menus are arrow-navigable, with Enter to choose and Esc to close.

On nebula.tv the extension adds:

• Header — ↑ from the top of the content jumps to the bar (Home, Library, Explore, Store, the search, Settings); ← and → move across it, and ↓ returns to the page.
• Content — ← and → move along whatever is beside the selection (a row of cards, a grid row, a section's tabs, the filter pills next to a sort button), ↑ and ↓ between what is above and below it. A row that holds more than it shows is paged as you reach its edge, and a listing that fills in further cards as you scroll is waited for rather than treated as the end.
• The start page's carousel — ← and → move from title to title across the big slideshow at the top, which stops advancing by itself while you are on it.
• Search — the search in the header is a stop like any other button, so ← and → carry on past it. Enter hands the keys to the field; Enter searches and selects the first result, and Esc leaves the field for the bar, keeping the query.
• Player — a video page does not start playing by itself: opening a video from a card would otherwise start it, and the playback is taken away again before a frame is shown. It opens with the player selected, framed like anything else, and ↓ walks on into the page below it. Enter plays it fullscreen; Esc leaves fullscreen, pauses, and puts the selection back on the player. While it is playing the keys are Nebula's own player's, which has a good set of them — and while it is not playing those same keys are kept off it, so navigating the page cannot start a video you are not looking at. The one control in the bar with no key of its own, the autoplay-next switch, is a stop just under the picture.
• Menus — the sort pickers and the player's quality and speed menu are arrow-navigable, with Enter to choose and Esc to close.

On all of them:

• Play — a “Play” button is focused automatically as soon as it appears, so Enter starts playback right away.
• Back and quit — Esc navigates back within the site, or closes the tab when there is nowhere left to go back to.
• Idle mouse — while the mouse is not moving, the cursor is hidden and hover events are suppressed, so keyboard navigation does not pop preview cards open under a parked pointer.
• Visible selection — the selected element is given a clear focus ring and scrolled into view.

The extension is designed so that support for additional video sites can be added as separate handlers. Free software under AGPL-3.0-only; the source is available from the project homepage linked above.