@teamsparta/sparta-player v0.4.2

A Simple React Component for using video.js

This package helps you use video.js like a simple React Component without worrying about the UI.

Usage Notice

April 24, 2025 — Now with TypeScript support!

The latest version of this package is based on TypeScript.

If you are using a pure JavaScript project,
please install version 0.3.19 as shown below:

npm install @teamsparta/sparta-player@0.3.19

Install

# using npm
npm install @teamsparta/sparta-player
# using yarn
yarn add @teamsparta/sparta-player

Sample UI

Usage

example 1 (with TypeScript)

import React from "react";
import { SpartaPlayer } from "@teamsparta/sparta-player";
import { useNavigate } from "react-router-dom";

const TestPage: React.FC = () => {
  const contentId = 0; // 예시, 실제 코드에서는 URL 파라미터 등에서 가져옴
  const navigate = useNavigate();
  const videoSrc =
    "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8";

  return (
    <SpartaPlayer
      source={videoSrc} // string, required
      videoType="application/x-mpegURL" // string, required
      autoPlay={true}
      controls={true}
      vttSource={vttSource}
      // thumbnail={'https://picsum.photos/1024/500'}
      isNoVttSourceAlert={true}
      noVttSourceAlertMessage="자막을 지원하지 않는 수업이에요."
      title={"제목 긴거 테스트스트스"}
      isNavigationOn={true}
      isAutoPlayButtonOn={true}
      isLoaded={isLoaded}
      defaultQuality={localStorage.getItem("quality") || "auto"}
      defaultPlaybackRate={localStorage.getItem("rate") || "1"}
      defaultSubtitle={localStorage.getItem("subtitle") || false}
      defaultFullscreen={localStorage.getItem("fullscreen") || false}
      defaultVolume={localStorage.getItem("volume") || 1}
      defaultMuted={localStorage.getItem("muted") || false}
      onReady={(player) => {}}
      // onPlay={() => console.log('onPlay')}
      // onPause={() => console.log('onPause')}
      // onEnded={() => console.log('onEnded')}
      // onTimeUpdate={(time) => console.log('onTimeUpdate', time)}
      onVolumeChange={(volume) =>
        localStorage.setItem("volume", JSON.stringify(volume))
      }
      onSeeking={(time) =>
        localStorage.setItem("seeking", JSON.stringify(time))
      }
      onMute={(isMuted) =>
        localStorage.setItem("muted", JSON.stringify(isMuted))
      }
      onPlaybackRateChange={(rate) =>
        localStorage.setItem("rate", JSON.stringify(rate))
      }
      onQualityChange={(quality) =>
        localStorage.setItem("quality", JSON.stringify(quality))
      }
      onSubtitleChange={(isSubtitle) =>
        localStorage.setItem("subtitle", JSON.stringify(isSubtitle))
      }
      onFullscreenChange={(isFullscreen) =>
        localStorage.setItem("fullscreen", JSON.stringify(isFullscreen))
      }
      onChangeAutoPlay={(isAutoPlay) =>
        localStorage.setItem("autoplay", JSON.stringify(isAutoPlay))
      }
      onClickPrev={() => {
        if (contentId > 0) {
          handleNavigate(contentId - 1);
        }
      }}
      // 다음 버튼
      onClickNext={() => {
        if (contentId < videoSources.length - 1) {
          handleNavigate(contentId + 1);
        }
      }}
    />
  );
};

example2 (with JavaScript)

import React from "react";
import { SpartaPlayer } from "@teamsparta/sparta-player";

export const TestPage = () => {
  return (
    <>
      <S.MobileWrapper>
        <LectureMobileNavBar />
        <SpartaPlayer
          title={"some video"}
          source={"https://www.w3schools.com/html/mov_bbb.mp4"}
          videoType="video/mp4"
          isNavigationOn={true}
        />
        <LectureTapMenu />
        <LectureMobileFloating isInitialized={isInitialized} />
      </S.MobileWrapper>
    </>
  );
};

props

TypeScript Support

From version 0.4.0, SpartaPlayer supports TypeScript. The component comes with full type definitions for props, allowing better IDE support and catching potential errors at compile time.

import { SpartaPlayer, SpartaPlayerProps } from "@teamsparta/sparta-player";

// SpartaPlayerProps gives you access to all available prop types
const customProps: Partial<SpartaPlayerProps> = {
  source: "video.mp4",
  videoType: "video/mp4",
  onPlay: (time) => console.log(`Video started playing at ${time}s`),
};

// IDE will now provide type hinting and validation
const MyPlayer = () => <SpartaPlayer {...customProps} autoPlay />;

Notification

This package is developed and maintained by TeamSparta. Unfortunately, we are using a private workspace, which makes it difficult to publish to GitHub. If you have any issues or suggestions, please contact us at jungeun.lee@teamsparta.co