Framework Integration Recipes

Clean, zero-friction integration patterns for modern JavaScript frontends.

React & Next.js

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'
      });
    }

    return () => {
      if (playerRef.current) {
        playerRef.current.destroy();
      }
    };
  }, []);

  return <video ref={videoRef} src={src} poster={poster} />;
}

Vue 3

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { Sopplayer } from 'sopplayer';
import 'sopplayer/css';

const videoEl = ref(null);
let player = null;

onMounted(() => {
  player = new Sopplayer(videoEl.value, {
    theme: 'flamingo'
  });
});

onUnmounted(() => {
  if (player) player.destroy();
});
</script>

<template>
  <video ref="videoEl" src="/sample.mp4" poster="/sample.png" />
</template>

Vanilla ES Modules (Browser)

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

<video id="player" src="video.mp4"></video>

<script type="module">
  import { Sopplayer } from 'https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer@v2.0.0/dist/sopplayer.esm.js';

  const player = new Sopplayer('#player', {
    theme: 'forest',
    autoplay: false
  });
</script>