# 🎎 Sopplayer **The Ultra-Lightweight, Accessible & Zero-Dependency HTML5 Video Player** [![Version](https://img.shields.io/badge/version-2.0.0-38bdf8.svg?style=flat-square)](https://github.com/SH20RAJ/Sopplayer/releases) [![Bundle Size](https://img.shields.io/badge/bundle%20size-%3C40%20KB%20min-10b981.svg?style=flat-square)](https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer@v2.0.0/dist/sopplayer.min.js) [![Gzip Size](https://img.shields.io/badge/gzipped-~11%20KB-059669.svg?style=flat-square)](https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer@v2.0.0/dist/sopplayer.min.js) [![Dependencies](https://img.shields.io/badge/dependencies-0%20(Pure%20JS)-818cf8.svg?style=flat-square)](https://github.com/SH20RAJ/Sopplayer/blob/main/package.json) [![Accessibility](https://img.shields.io/badge/accessibility-WCAG%202.1%20AA-a855f7.svg?style=flat-square)](https://sh20raj.github.io/Sopplayer/demo/accessibility/) [![License](https://img.shields.io/badge/license-MIT-64748b.svg?style=flat-square)](./LICENSE) [![jsDelivr Hits](https://data.jsdelivr.com/v1/package/gh/SH20RAJ/Sopplayer/badge)](https://www.jsdelivr.com/package/gh/SH20RAJ/Sopplayer) [![Build Status](https://img.shields.io/badge/tests-18%20passing-brightgreen.svg?style=flat-square)](https://github.com/SH20RAJ/Sopplayer/actions)

Live Showcase • Interactive Playground • Theme Gallery • A11y Lab • Documentation

Sopplayer Banner

--- ## 🧭 Navigation - [⚡ Why Sopplayer?](#-why-sopplayer) - [📊 Comparison Matrix](#-comparison-matrix) - [🚀 Quickstart](#-quickstart) - [1. Versioned CDN](#1-versioned-cdn-recommended-for-production) - [2. NPM / Modern Bundlers](#2-npm--modern-bundlers) - [3. React / Next.js](#3-react--nextjs) - [4. Vue 3](#4-vue-3) - [5. Svelte](#5-svelte) - [6. Declarative HTML5 Drop-in](#6-declarative-html5-drop-in) - [ðŸŽĻ Theming & CSS Custom Properties](#-theming--css-custom-properties) - [âŒĻïļ Keyboard Shortcuts](#ïļ-keyboard-shortcuts) - [📖 API Reference](#-api-reference) - [Constructor Options](#constructor-options) - [Instance Methods](#instance-methods) - [Lifecycle Events](#lifecycle-events) - [â™ŋ Accessibility (WCAG 2.1 AA)](#-accessibility-wcag-21-aa) - [🔄 Backwards Compatibility & Migration](#-backwards-compatibility--migration) - [🔒 Security & Hardening](#-security--hardening) - [🛠ïļ Development & Testing](#ïļ-development--testing) - [ðŸ‘Ĩ Contributing](#-contributing) - [📜 License](#-license) --- ## ⚡ Why Sopplayer? Sopplayer is a next-generation HTML5 video player built specifically for web developers who want exceptional media playback without the baggage of heavy frameworks, complex build chains, or security hazards. - ðŸŠķ **Zero Runtime Dependencies**: Written in pure, modular JavaScript. Minified bundle size is **under 40 KB** (and ~11 KB gzipped) — **95% smaller** than legacy Video.js stacks. - â™ŋ **Audited WCAG 2.1 AA Accessibility**: Engineered with accessible semantics: ARIA progress sliders (`role="slider"`), auditory screen reader announcements (`aria-live="polite"`), high-contrast visible focus outlines, and full `prefers-reduced-motion` compliance. - âŒĻïļ **Comprehensive Keyboard Navigation**: Control playback (Space/K), seeking (←/→, J/L, 0–9), volume (↑/↓, M), fullscreen (F), Picture-in-Picture (P), and shortcuts cheat sheet (?). - ðŸŽĻ **Modern Design System & 7 Built-in Themes**: Driven entirely by CSS Custom Properties. Includes `Default` (Obsidian Glass), `Flamingo` (Coral / Rose), `Forest` (Emerald), `City` (Urban Ruby), `Sea` (Azure), `Fantasy` (Neon Cyberpunk), and `Minimal` (Monochrome). - 🔒 **Secure by Default**: Completely eliminated unsafe `innerHTML` concatenation with untrusted URLs, sanitizes media protocols against `javascript:` pseudo-protocol injection, and isolates error handling across event loops. - 🔄 **100% Backwards Compatible**: Existing CDN URLs (`cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/...`), legacy `