Framework integration recipes

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

export function VideoPlayer({ src }) {
  const ref = useRef(null);

  useEffect(() => {
    const player = new Sopplayer(ref.current, { theme: 'duolingo' });
    return () => player.destroy();
  }, []);

  return <video ref={ref} src={src} playsInline />;
}

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

const video = ref(null);
let player;

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

onBeforeUnmount(() => player?.destroy());
</script>

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

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/sh20raj-backup/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-backup/Sopplayer@v2.0.0/dist/sopplayer.esm.js';

  new Sopplayer('#player', { theme: 'default' });
</script>