A video player that feels simple.

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/sh20raj-backup/Sopplayer@v2.0.0/dist/sopplayer.min.css">

<video id="player" poster="poster.jpg" playsinline>
  <source src="video.mp4" type="video/mp4">
</video>

<script src="https://cdn.jsdelivr.net/gh/sh20raj-backup/Sopplayer@v2.0.0/dist/sopplayer.min.js"></script>
<script>
  new Sopplayer('#player', { theme: 'default' });
</script>

npm install sopplayer

import { Sopplayer } from 'sopplayer';
import 'sopplayer/css';

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

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(() => {
    playerRef.current = new Sopplayer(videoRef.current, {
      theme: 'default',
      aspectRatio: '16:9'
    });
    return () => playerRef.current?.destroy();
  }, [src]);

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

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/sh20raj-backup/Sopplayer@v2.0.0/dist/sopplayer.min.css">
<script src="https://cdn.jsdelivr.net/gh/sh20raj-backup/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>