The Modern, Accessible
HTML5 Video Player

<!-- 1. Include Sopplayer v2.0.0 Stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer@v2.0.0/dist/sopplayer.min.css">

<!-- 2. Standard HTML5 Video Element -->
<video id="player" poster="poster.jpg" preload="metadata" width="720">
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" label="English" srclang="en" src="subtitles.vtt" default>
</video>

<!-- 3. Include Sopplayer v2.0.0 Script -->
<script src="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer@v2.0.0/dist/sopplayer.min.js"></script>
<script>
  const player = new Sopplayer('#player', {
    theme: 'default', // 'flamingo' | 'forest' | 'city' | 'sea' | 'fantasy' | 'minimal'
    autoplay: false
  });
</script>

# Install via npm, pnpm, or yarn
npm install sopplayer

// In your application module:
import { Sopplayer } from 'sopplayer';
import 'sopplayer/css';

const player = new Sopplayer('#video-element', {
  theme: 'flamingo',
  keyboard: true,
  seekStep: 5
});

import { useEffect, useRef } from 'react';
import { Sopplayer } from 'sopplayer';
import 'sopplayer/css';

export function VideoPlayer({ src, poster }) {
  const videoRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(() => {
    if (videoRef.current) {
      playerRef.current = new Sopplayer(videoRef.current, {
        theme: 'default',
        aspectRatio: '16:9'
      });
    }
    return () => {
      playerRef.current?.destroy();
    };
  }, [src]);

  return (
    <video ref={videoRef} poster={poster} preload="metadata">
      <source src={src} type="video/mp4" />
    </video>
  );
}

<!-- Drop-in zero-JS initialization with data-setup -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer@v2.0.0/dist/sopplayer.min.css">
<script src="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer@v2.0.0/dist/sopplayer.min.js"></script>

<video class="sopplayer" data-setup='{"theme":"forest","autoplay":false}' poster="poster.jpg">
  <source src="video.mp4" type="video/mp4">
</video>