A Visual Studio Code extension that provides an integrated media player for audio and video files with a modern, accessible interface powered by Plyr.
Features
- Clean Integration - Seamlessly integrates with VS Code's interface and themes
- Multiple Format Support:
- Video: mp4, webm, ogg, mov, avi, mkv, m4v, flv
- Audio: mp3, wav, ogg, flac, aac, m4a
- Auto-Play - Automatically opens media player when you select a compatible media file
- Rich Controls:
- Play/Pause with large overlay button
- Volume control with mute toggle
- Seek controls (10s forward/backward)
- Interactive progress bar with hover preview
- Speed controls (0.5x to 2x playback speed)
- Fullscreen mode for videos
- Picture-in-Picture support (where available)
- Accessibility First - Full keyboard navigation and screen reader support
- Responsive Design - Adapts to different window sizes
- VS Code Theme Integration - Automatically matches your VS Code theme colors
Installation
- Open Visual Studio Code
- Go to Extensions tab (Ctrl+Shift+X)
- Search for "video player"
- Click Install
- Ready to use!
Alternatively, install from the VS Code Marketplace.
Usage
Method 1: Auto-Open
- Open any supported audio or video file in VS Code
- The media player will automatically open in a side panel
- Media starts playing automatically
Method 2: Manual Selection
- Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
- Type "Play Media File" and select the command
- Choose your media file in the file picker
- Player opens with your selected file
Keyboard Shortcuts
The player supports comprehensive keyboard controls:
- Space / K: Play/Pause toggle
- ← / →: Seek backward/forward (default: 10 seconds)
- ↑ / ↓: Volume up/down
- M: Mute/Unmute
- F: Toggle fullscreen (video only)
- C: Toggle captions (if available)
- 0-9: Jump to 0%-90% of video duration
- L: Toggle loop
Video Files
.mp4 - MP4 (H.264/H.265).webm - WebM.ogg - Ogg Theora.mov - QuickTime.avi - AVI.mkv - Matroska.m4v - MP4 Video.flv - Flash Video
Audio Files
.mp3 - MP3.wav - WAV.ogg - Ogg Vorbis.flac - FLAC.aac - AAC.m4a - MPEG-4 Audio
Features in Detail
Plyr Integration
This extension uses Plyr as its media player engine, providing:
- Accessibility: Full ARIA support and keyboard navigation
- Customizable: Clean HTML markup and CSS custom properties
- Cross-browser: Works consistently across modern browsers
- Lightweight: No framework dependencies
VS Code Integration
- Theme Aware: Player colors automatically match your VS Code theme
- Side Panel: Opens in a dedicated panel that doesn't interfere with your coding
- File Watcher: Automatically detects when media files are opened
- Resource Management: Efficient handling of media file URIs
Troubleshooting
If a file doesn't play:
- Ensure the format is supported by modern web browsers
- Check file permissions and accessibility
- Try using "Play Media File" command instead of direct file opening
- Some codecs may not be supported depending on your system
- Large video files may take time to load initially
- Consider using web-optimized formats (MP4 with H.264) for best performance
- Close other media players if experiencing conflicts
| |
