Keyboard Shortcuts - Platzi Viewer

Overview

Platzi Viewer supports keyboard shortcuts for faster navigation and video control. These shortcuts work throughout the application and are especially useful during video playback.

Video Player Shortcuts

These shortcuts work when you’re watching a video in the player view:

Playback Control

Shortcut	Action	Description
`Space`	Play/Pause	Toggle video playback (when not in input fields)
`←`	Rewind 5s	Seek backward 5 seconds
`→`	Forward 5s	Seek forward 5 seconds
`Alt+←`	Previous Class	Navigate to the previous video class
`Alt+→`	Next Class	Navigate to the next video class

Display Control

Shortcut	Action	Description
`F`	Fullscreen Toggle	Enter or exit fullscreen mode
`Escape`	Exit Fullscreen	Exit fullscreen mode (when in fullscreen)
`Double-click`	Fullscreen Toggle	Double-click video to toggle fullscreen

Additional Controls

Note: The following do not have dedicated keyboard shortcuts but can be accessed via player controls:

Volume - Use volume slider or mute button
Speed - Click speed button to cycle (0.5x → 0.75x → 1x → 1.25x → 1.5x → 2x)
Quality - Click quality button and select from menu
Subtitles - Click CC button to toggle

Mouse Interactions

While not keyboard shortcuts, these mouse interactions are important for video control:

Video Container

Action	Result
Click video	Play/Pause toggle
Double-click video	Enter/exit fullscreen
Mouse move	Show controls (auto-hide after 2.5s)

Progress Bar

Action	Result
Click progress bar	Seek to clicked position
Drag progress bar	Scrub through video with preview
Hover progress bar	Show precise time position

Volume Control

Action	Result
Click volume button	Toggle mute
Drag volume slider	Adjust volume level

Shortcut	Action	Description
Browser Back	Previous Page	Navigate to previous view
Browser Forward	Next Page	Navigate forward (if available)

Note: Platzi Viewer uses hash-based routing, so browser back/forward buttons work naturally. While not keyboard shortcuts, breadcrumbs provide quick navigation:

🏠 Inicio › Route Name › Course Name

Click any breadcrumb to navigate to that level.

Search and Exploration

Explore View

Action	Result
Focus search box	Start typing to search
Type in search	Real-time filtering (200ms debounce)
Click category chip	Filter by category
Click “Todas”	Clear category filter

Auto-Focus: Search box is automatically focused when entering Explore view.

Shortcut Behavior Details

Space Key (Play/Pause)

Implementation:

if (e.key === ' ' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
  e.preventDefault();
  if (video) video.paused ? video.play() : video.pause();
}

Behavior:

Works globally when player is active
Disabled in input fields and textareas
Prevents page scroll (default space behavior)

Arrow Keys (Seek)

Implementation:

if (e.key === 'ArrowLeft' && !e.altKey && video) {
  e.preventDefault();
  seekToTime(video.currentTime - 5);
}

if (e.key === 'ArrowRight' && !e.altKey && video) {
  e.preventDefault();
  seekToTime(video.currentTime + 5);
}

Behavior:

Seeks 5 seconds backward or forward
Uses sync-aware seeking (maintains A/V sync)
Prevents default browser behavior

Alt + Arrow Keys (Navigate Classes)

Implementation:

if (e.key === 'ArrowLeft' && e.altKey) this.navigateClass(-1);
if (e.key === 'ArrowRight' && e.altKey) this.navigateClass(1);

Behavior:

Navigates to previous/next class in course
Crosses module boundaries automatically
Updates URL hash to new class
Stops current video and loads new one

F Key (Fullscreen)

Implementation:

if (e.key === 'f' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
  const fsBtn = document.getElementById('ytFullscreen');
  if (fsBtn) fsBtn.click();
}

Behavior:

Toggles fullscreen on video wrapper (includes controls)
Disabled in input fields and textareas
Works in both directions (enter/exit)

Escape Key (Exit Fullscreen)

Standard Browser Behavior:

Handled by browser’s native fullscreen API
Automatically exits fullscreen mode
No custom implementation needed

Shortcut Registration

Shortcuts are registered when the player view mounts: File: /js/views/player.js

mounted() {
  this._keyHandler = (e) => {
    // Keyboard shortcut handlers
  };
  document.addEventListener('keydown', this._keyHandler);
}

destroy() {
  if (this._keyHandler) {
    document.removeEventListener('keydown', this._keyHandler);
  }
}

Lifecycle:

Registered when player view is shown
Removed when navigating away from player
Prevents memory leaks and conflicts

Shortcut Conflicts

Input Field Protection

Shortcuts are disabled when typing in input fields:

if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
  // Execute shortcut
}

Protected Elements:

<input> fields (search boxes, etc.)
<textarea> fields (notes, comments)
Contenteditable elements (not currently used)

Browser Default Conflicts

Prevented Defaults:

Space - Prevents page scroll
←/→ - Prevents history navigation

Preserved Defaults:

Browser back/forward buttons work normally
Ctrl+F (find) still works
Ctrl+R (reload) still works
All other browser shortcuts remain functional

Accessibility Considerations

All essential functions are accessible via keyboard: ✓ Video playback control (space, arrows) ✓ Navigation between classes (Alt+arrows) ✓ Fullscreen control (F key) ✓ Seeking within video (arrow keys) ARIA Labels: Buttons include proper ARIA labels for screen readers:

<button 
  class="player-sidebar-fab"
  title="Ocultar/Mostrar temario"
  aria-label="Ocultar/Mostrar temario"
  aria-pressed="false"
>

Semantic HTML:

Proper button elements (not div with onclick)
Native video element with standard controls backup
Logical tab order

Mobile and Touch Devices

No Keyboard Shortcuts

Mobile devices don’t typically have keyboard shortcuts, but offer: Touch Controls:

Tap video to play/pause
Tap controls to show/hide
Swipe progress bar to seek
Pinch to zoom (native browser)

Overlay Buttons:

Previous/Next buttons always visible
Large touch targets (44px minimum)
No reliance on hover states

Tips for Power Users

Efficient Video Watching

Use Alt+→ to skip between classes quickly
Use ←/→ to skip intros/outros (5s seeks)
Use Space for instant pause when taking notes
Use F for distraction-free fullscreen

Enter fullscreen (F)
Watch video
Pause for notes (Space)
Resume (Space)
Next class (Alt+→)
Repeat

Combining with Mouse

Use keyboard for playback control
Use mouse for progress bar seeking
Use mouse for speed/quality adjustments

Customization

Current Limitations

⚠️ Keyboard shortcuts are not currently customizable. They are hard-coded in the player implementation. Future Enhancement: A settings panel could be added to allow custom key bindings.

Modifying Shortcuts (Developers)

To change shortcuts, modify /js/views/player.js:

this._keyHandler = (e) => {
  const video = document.getElementById('mainVideo');
  
  // Change 'f' to 'g' for fullscreen
  if (e.key === 'g' && e.target.tagName !== 'INPUT') {
    const fsBtn = document.getElementById('ytFullscreen');
    if (fsBtn) fsBtn.click();
  }
  
  // Add new shortcut
  if (e.key === 'm') {
    const muteBtn = document.getElementById('ytMuteBtn');
    if (muteBtn) muteBtn.click();
  }
};

Quick Reference Card

Essential Shortcuts

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
         PLATZI VIEWER SHORTCUTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

PLAYBACK
  Space        Play/Pause
  ←            Rewind 5 seconds
  →            Forward 5 seconds
  
NAVIGATION  
  Alt+←        Previous class
  Alt+→        Next class
  
DISPLAY
  F            Fullscreen toggle
  Escape       Exit fullscreen
  
MOUSE
  Click        Play/Pause
  Double-click Fullscreen
  
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Troubleshooting Shortcuts

Shortcut Not Working

Check:

You’re in the player view (not home/explore)
Focus is not in an input field
Browser tab is active (shortcuts work only in active tab)
Player has finished loading

Conflicts with Browser Extensions

Known Conflicts:

Video downloaders may intercept keyboard events
Custom video player extensions may conflict
Accessibility extensions may remap keys

Solution:

Disable conflicting extensions
Use mouse controls as fallback
Check extension settings for key remapping

Cause: Shortcuts are registered per-view and cleaned up on navigation. Solution:

Navigate back to player view
Refresh page if issue persists
Check browser console for JavaScript errors

Future Enhancements

Potential keyboard shortcut additions:

M - Mute/unmute
C - Toggle subtitles
+/- - Increase/decrease speed
0-9 - Jump to 0%, 10%, 20%… 90% of video
,/. - Frame-by-frame seeking (when paused)
Shift+N - Toggle notes panel
Shift+T - Toggle sidebar

Note: These are not currently implemented but could be added based on user feedback.

Overview

Getting Started

User Guide

Deployment

Architecture

​Overview

​Video Player Shortcuts

​Playback Control

​Display Control

​Additional Controls

​Mouse Interactions

​Video Container

​Progress Bar

​Volume Control

​Navigation Shortcuts

​General Navigation

​Breadcrumb Navigation

​Search and Exploration

​Explore View

​Shortcut Behavior Details

​Space Key (Play/Pause)

​Arrow Keys (Seek)

​Alt + Arrow Keys (Navigate Classes)

​F Key (Fullscreen)

​Escape Key (Exit Fullscreen)

​Shortcut Registration

​Shortcut Conflicts

​Input Field Protection

​Browser Default Conflicts

​Accessibility Considerations

​Keyboard-Only Navigation

​Screen Reader Compatibility

​Mobile and Touch Devices

​No Keyboard Shortcuts

​Tips for Power Users

​Efficient Video Watching

​Navigation Workflow

​Combining with Mouse

​Customization

​Current Limitations

​Modifying Shortcuts (Developers)

​Quick Reference Card

​Essential Shortcuts

​Troubleshooting Shortcuts

​Shortcut Not Working

​Conflicts with Browser Extensions

​Shortcuts Disabled After Navigation

​Future Enhancements

Build docs developers (and LLMs) love

Overview

Video Player Shortcuts

Playback Control

Display Control

Additional Controls

Mouse Interactions

Video Container

Progress Bar

Volume Control

Navigation Shortcuts

General Navigation

Breadcrumb Navigation

Search and Exploration

Explore View

Shortcut Behavior Details

Space Key (Play/Pause)

Arrow Keys (Seek)

Alt + Arrow Keys (Navigate Classes)

F Key (Fullscreen)

Escape Key (Exit Fullscreen)

Shortcut Registration

Shortcut Conflicts

Input Field Protection

Browser Default Conflicts

Accessibility Considerations

Keyboard-Only Navigation

Screen Reader Compatibility

Mobile and Touch Devices

No Keyboard Shortcuts

Tips for Power Users

Efficient Video Watching

Navigation Workflow

Combining with Mouse

Customization

Current Limitations

Modifying Shortcuts (Developers)

Quick Reference Card

Essential Shortcuts

Troubleshooting Shortcuts

Shortcut Not Working

Conflicts with Browser Extensions

Shortcuts Disabled After Navigation

Future Enhancements